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Как мы сюда 
попали? 


Приступим 


Недавно я прочел высказывание одного разработчика для платформы Мо7Ша, где 
говорится о той напряженности, которая всегда сопутствует разработке стандартов 
(р: //11515.1у3 .ога/Агсһімеѕ/РиЫіс/риЫііс-һті/2010Јап/0107.Һті): 


Спецификация и программная реализация должны пройти путь осторожного совместного разви- 
тия. Ведь, с одной стороны, не хочется, чтобы реализация появилась раньше, чем выйдет окон- 
чательная версия стандарта, иначе разработчики станут принимать во внимание особенности 
конкретной программы, то есть в дело пойдет лишь фрагмент спецификации. С другой стороны, 
не хочется утверждать полный стандарт до выхода хотя бы одной реализации, иначе придется 
обойтись без обратной связи, в частности, не будут приняты в расчет мнения создателей 
программ. Противоречие неизбежно. Нам остается решать проблему методом проб и ошибок. 


Пока я буду рассказывать, как появился НТМТ5, помните эти слова. 


МІМЕ-типы 


Книга, которую вы держите в руках, посвящена НТМІ5, а не предшествующим 
версиям стандарта НТМІ. и тем более не ХНТМІ.. Но, чтобы ясно проследить 
историю НТМТ.5 и увидеть причины, предшествующие его появлению, нужно сна- 
чала овладеть кое-какими техническими деталями, в частности получить понятие 
о МІМЕ-типах. 

Каждый раз, когда ваш браузер пытается загрузить страницу, сервер, прежде 
чем отослать клиентской программе код самой страницы, отправляет ей ряд заго- 
ловков. Пользователь обычно не видит этих заголовков, хотя в некоторых про- 
граммах для веб-разработчиков предусматривается возможность их отображения. 
Заголовки важны постольку, поскольку они сообщают браузеру, как воспринимать 
код посылаемой вслед за ними страницы. Самый информативный заголовок на- 
зывается Сощет-Туре и выглядит, например, так: 


Соптепё-Туре: ёехЕ/ћїіт] 


Значение ёехі/һїті называется типом содержимого, или МІМЕ-типом за- 
гружаемой страницы. Только данный заголовок определяет, каково содержание 
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отдельного ресурса и, следовательно, как этот ресурс должен выводиться на 
экран. У изображений собственные МІМЕ-типы (1таде/ ред — для картинок 
в формате ЈРЕС, 1таде/рид — для формата РМС ит. д.). Собственными МІМЕ- 
типами оснащены файлы Јауа$Ѕсгірё, таблицы стилей С$$ и, в общем-то, все, что 
есть в Сети. 

На самом деле все чуть сложнее, чем рассказано выше. Самые ранние веб- 
серверы, под которыми я понимаю веб-серверы 1993 года и нескольких после- 
дующих лет, не отправляли заголовки Сопіепі -Туре, потому что те были изобре- 
тены только в 1994 году. Ради совместимости, во имя которой, кстати, с 1993 года 
по сей день делалось и делается очень много всего, отдельные популярные брау- 
зеры при определенных условиях игнорируют заголовки Сопіепї -Туре. Это на- 
зывается контент-сниффингом. Но общее правило таково, что любой фрагмент 
содержимого Сети, будь то НТМТ-страница, изображение, сценарий, видеоза- 
пись, РОЕ-документ или что-то еще под собственным О ВГ-адресом, посылается 
клиентской программе с предварительным уведомлением о МІМЕ-типе в заго- 
ловке Сопіепї - Туре. 

Хорошенько запомните эту информацию, так как она еще пригодится. 


Большое отступление о том, 
как появляются стандарты 


Откуда взялся тег <119>? Не думаю, что вы хоть иногда задавались подобным 
вопросом. Очевидно, кто-то его создал. Такие вещи не берутся ниоткуда. Из всех 
элементов и атрибутов НТМГ, которыми вы в разное время пользовались, абсо- 
лютно каждый был когда-то кем-то создан. Этот кто-то придумал, как должен ра- 
ботать элемент или атрибут, и письменно сформулировал свои мысли. Такого рода 
люди, бесспорно, умнее нас с вами, но они тоже обычные люди. 

Если стандарт разрабатывался открыто, то можно вернуться в прошлое и уви- 
деть, как рождалась идея того или иного пункта спецификации. Обсуждения ве- 
дутся в почтовых рассылках, а их архивы обычно имеют интерфейс поиска. Чтобы 
ответить на вопрос о теге <іто>, я решил немного позаниматься «электронной ар- 
хеологией» и погрузился в толщу времен, когда еще не существовало Консорциу- 
ма Всемирной паутины (\/ЗС), а все веб-серверы мира можно было пересчитать 
по пальцам. Речь идет о первых днях Интернета. 

25 февраля 1993 года Марк Андрессен (Магс Апагееззеп) написал!: 


Предлагаю новый опциональный НТМЕ-тег: 

ІМС 

При нем должен обязательно указываться аргумент ЅЕС= "игі". 

Тег отсылает к файлу растрового изображения (Бйтар или ріхтар). Браузер будет запраши- 
вать этот файл в Сети, распознавать как изображение и вставлять в текст сообразно месту 
тега в коде страницы. 


1 ср://1997 ме могу. ога /\у\ум.1865 /чучуүү-а1к.199341/0182.һт!. За ходом обсуждения, 
цитируемого здесь и далее, можно следить, переходя по ссылкам М№ехё теззазе и Ртеу1юи$ 
теѕѕаве, расположенным вверху и внизу указанной веб-страницы. — Примеч. авт. 
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Пример использования: 
<[Мб 5КС=" 11е: //Ғоораг. сот/ Ғоо/раг/рТагоћ. хбт"> 


(Закрывающий тег не требуется.) 

Как и любое другое содержимое, этот тег может быть вложет внутрь якоря. Тогда изображение 
станет чувствительным к активизации, как и обычная текстовая ссылка. 

Следует предоставить браузерам свободу выбора графических форматов, которые будут в них 
поддерживаться. Удачным выбором мне представляются, например, Хот и Хрт. Если браузер 
не умеет отображать данный формат, пусть он делает то, что разработчикам заблагорассудит- 
ся предусмотреть на этот случай (так, в Х Моѕаіс будет выводиться растровая картинка, за- 
мещающая нужное изображение). 

Данная функциональность будет реализована в Х Моѕаіс. Мы работаем над ней и собираем- 
ся использовать по крайней мере внутри команды разработчиков. Разумеется, я буду рад 
вашим предложениям по поводу того, каким должен быть механизм поддержки изображений 
в НТМЕ. Если у вас появится мысль удачнее моей, поделитесь, пожалуйста. Я знаю, что разно- 
образие графических форматов делает ситуацию чрезвычайно туманной, но альтернативы 
не вижу. Можно разве что сказать: «Пусть браузер работает как умеет» — и ждать той 
поры, когда будет предложено идеальное решение (может быть, когда-нибудь, с помощью 
МІМЕ-типов). 


Эту цитату надо пояснить. ХЬт и Хрш — популярные графические форматы 
в ОМІХ-системах; Моѕаіс — один из первых браузеров. Его версия, которая рабо- 
тала в ОМІХ-системах, называлась Х Моѕаіс. Когда Марк отправлял это письмо 
на дискуссионный лист в начале 1993 года, он еще не основал компанию Моѕаіс 
Соттипісабіопѕ СогрогаНоп, которая впоследствии принесла ему известность, 
иеще не начал работу над флагманским продуктом будущей компании — браузе- 
ром Моѕаіс Меёзсаре (фирма и программа позже были переименованы в №еіѕсаре 
Согрогайоп и Меёсаре №ауіваѓог соответственно). 

Говоря о МІМЕ-типах «может быть, когда-нибудь», Марк ссылается на пре- 
дусмотренный в протоколе НТТР механизм «переговоров о содержимом». Благо- 
даря этому механизму клиентская программа-браузер сообщает серверу (в данном 
случае веб-серверу), какие типы ресурсов она умеет обрабатывать (например, 
1таде/ јред), а сервер в ответ может прислать содержимое в удобном для клиента 
формате. По состоянию на февраль 1993 года программно реализован только са- 
мый первый вариант протокола НТТР (1991 год), в котором клиент не мог пере- 
дать серверу информацию о поддерживаемых типах изображений. Отсюда про- 
блема, с которой столкнулся Марк. 

Несколько часов спустя Тони Джонсон (Топу ]обпзоп) ответил: 


У меня в Міааѕ 2.0 (программа пока находится во внутреннем пользовании $1АС, но уже гото- 
ва к открытому релизу) применяется похожее решение. Тег иначе назван, и в нем есть еще 
один аргумент МАМЕ= "пате", но функциональность абсолютно та же, что и у предложенного 
вами тега 1МС. Пример: 


<ІСОМ№ пате="М№оЕпЕгу" пге{=" Пр: //пофе/Тоо/Баг/МоЕпёгу . хбт"> 


Смысл параметра МАМЕ в том, чтобы позволить браузеру прибегать к помощи набора «встро- 
енных» картинок. Если имя соответствует изображению, которым браузер уже располагает, 
то вместо того, чтобы доставать картинку из Сети, программа использует готовый графический 
файл. Кроме того, имя изображения может подсказывать текстовым браузерам, каким симво- 
лом заместить картинку. 
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Меня мало волнуют имена тегов и параметров (но если бы мы решили прийти к компромиссу, 
они приобрели бы большое значение). Столь же маловажен, по-моему, вопрос об аббревиа- 
турах, то есть почему ІМС и $КС, а не 1МАСЕ и $ОЧВСЕ. Мне самому больше по душе ТСОМ — 
это слово дает понять, что картинка должна быть маленькой, вроде значка. Готов признать, 
впрочем, что слово ІСОМ итак уже обременено множеством смыслов. 


М14а$ — это еще один ранний браузер, современник Х Моѕаіс. Он был кросс- 
платформенным и работал как в ОМТХ, так и в УМ$. Аббревиатура ЅТ.АС рас- 
шифровывается как Ѕќапіога Глпеаг Ассејегаїог Сещег (Научно-исследовательский 
центр при Стэнфордском линейном ускорителе (электронов)). Теперь этот центр 
получил статус национальной лаборатории. Инженеры Ѕ1Г.АС запустили первый 
веб-сервер в США, который фактически был и первым за пределами Европы. 
В феврале 1993 года ЗТ.АС считался долгожителем Сети (работал год и три меся- 
ца!) с пятью веб-страницами на сервере. 

Вот продолжение письма Тони: 


Раз уж мы заговорили о новых тегах, то расскажу о другом аналогичном теге, поддержку ко- 
торого я намерен реализовать в Міааѕ 2.0. Его схема такова: 


<ІМСШЦЮЕ НВЕЕ="..."> 


В код документа в месте вхождения этого тега должен быть вставлен другой документ, на 
который ссылается тег. Этот документ может быть чем угодно по типу содержания, но основ- 
ная задача тега — обеспечить вставку изображений произвольного размера в веб-страницы. 
Когда будет реализован НТТР2, клиент и сервер смогут дополнительно оговаривать формат 
вставляемого документа. 


Под названием НТТР?2 здесь фигурирует базовый НТТР в редакции 1992 года. 
В начале 1993 года значительная его часть не имела программной реализации. Чер- 
новой вариант, известный как НТТР2, после некоторой доработки был стандарти- 
зован в качестве НТТР 1.0. В стандарт НТТР 1.0 уже включены заголовки-запросы 
для переговоров о содержимом, то есть то самое «может быть, когда-нибудь» на- 
ступило довольно скоро. 

Тони так заканчивает свое письмо: 


Я рассматривал и следующую альтернативу: 
<А НВЕЕ="..." ТМСЕУБЕ>См. фотографию</А> 


Не хочется прибавлять новую функциональность тегу <А>. Но такое решение было бы удоб- 
но для совместимости с браузерами, которые не понимают параметр ІМСШРЕ. Иными словами, 
если браузер распознает команду ТМСЕОВЕ, то он заменит текст ссылки («См. фотографию» 
в данном случае) картинкой, а более старый или более глупый браузер просто проигнорирует 
ТМСЕОРЕ. 


Это предложение не было реализовано, хотя идея заместительного текста на 
случай, если изображение отсутствует, очень привлекательна и не упоминается 
в предложенной Марком конструкции тега <1М6>. Много лет спустя идея была 
осуществлена в атрибуте <1т9 а1{="..."> (после чего все испортил М№еїѕсаре, 
который ошибочно отображал текст-заместитель в виде всплывающей подсказ- 
ки). 
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Через несколько часов после сообщения Тони ему и Марку ответил Тим Бернерс- 
Ли (Тіт Вегпетз-[ее): 


Я полагал, что картинки можно представлять в виде <а пате=йд1 һгеѓ= "Ғоһјкағоћј" КЕ = "ЕМВЕР, 
РВЕЗЕМТ">Картинка</а>. Значение ссылочных отношений таково: 

ЕМВЕО — встроить содержимое в данное место документа для отображения; 

РВЕЗЕМТ — отображать содержимое, если исходный документ доступен. 

Стоит отметить, что возможны разные сочетания атрибутов. Если браузер не поддерживает 
какой-то один из них, сбоя не будет. Понятно, что для создания таким способом значков, 
чувствительных к пользовательскому выбору, нужно вложить один якорь в другой. Но, честно 
говоря, я не хотел бы вводить особый тег. 


Это предложение не было реализовано, но атрибут е1 существует до сих пор 
(см. раздел «Элемент НЕАР» главы 3). 
Джим Дэвис (Лт Оау1$) прибавил: 


Хорошо бы еще иметь возможность указывать тип содержимого, например, так: 
<1Ме НВЕЕ=" Ир: //пѕа .одоу/рир/ѕоипаѕ/догру. аи" СОМТЕМТ-ТУРЕ=аиа1о/Ба$1с> 


Однако я, конечно, надеюсь дожить до того времени, когда тип содержимого будет строго 
определяться по расширению файла. 


Это предложение тоже не было реализовано, хотя позднее М№еѓѕсаре стал под- 
держивать встраивание произвольных мультимедийных объектов с помощью тега 
<етреа>. 

Джей Вебер (Јау С. \МеБег) написал следующее: 


Отображение графики в браузерах — моя давняя мечта. Но неужели для каждого вида муль- 
тимедийной информации надо создавать персональный тег? Еще недавно все с радостью ожи- 
дали появления механизма МІМЕ-типов. Что же случилось теперь? 


Марк Андрессен ответил: 


Это не альтернатива предстоящему использованию МІМЕ-типов как стандартного механизма 
обработки документов. Это простая реализация функциональности, которая нужна независи- 
мо от МІМЕ. 


Джей Вебер возразил: 


Забудем на время о МІМЕ-типах, они отвлекают от сути. Я, собственно, не согласен с вашим 
подходом к поддержке встроенных изображений, ведь можно ожидать, что на следующей 
неделе кто-нибудь предложит новый тег <А0Ю ЅКС= "Піе: //ёообаг.соту/ѓоо/баг/Ы̇агдһ.ѕпа"> для 
звуковых файлов. Между тем за использование единого для всех медийных типов способа 
встраивания пришлось бы платить не такой уж и дорогой монетой. 


Опыт свидетельствует, что беспокойство Джея было вполне обоснованным. 
Прошло, правда, больше недели, но в НТМТ.5 появились теги <уійео> и <аџіо>. 
В ответ на первое письмо Джея Дейв Рэггет (ЮОауе Каввеїб) написал: 


Совершенно правильно! Собираюсь рассмотреть множество графических и псевдографических 
типов в связи с механизмом переговоров о формате. Замечание Тима о поддержке активных 
областей на картинках тоже учту. 
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В том же 1993 году, но немного позже Дейв опубликовал стандарт НТМІ +, 
задуманный им в качестве замены первоначальному НТМІ. Стандарт не был реа- 
лизован; на смену НТМІ пришел ретроспективный НТМІ 2.0 — формальное опи- 
сание того аппарата тегов, который на момент принятия стандарта уже широко 
использовался: «Эта спецификация сводит воедино, уточняет и формально опи- 
сывает функции из того набора, который приблизительно соответствует возмож- 
ностям общеупотребительного НТМТ, по состоянию на июнь 1994 года». 

Позже на основе спецификации НТМТ- Дейв Рэггет создал стандарт НТМІ. 3.0. 
Нигде, кроме внутренней (используемой МЗС в качестве эталона) программы 
Агепа, стандарт НТМТ, 3.0 не был реализован. На смену ему пришел НТМТ, 3.2 — 
вновь ретроспектива: «Сохраняя полную обратную совместимость с существующим 
НТМЕ 2.0, стандарт НТМІ. 3.2 добавляет к нему широко распространенные новые 
функции: таблицы, приложения и обтекание изображений текстом». 

Еще позже Дейв выступил в качестве одного из соавторов НТМТ. 4.0, разрабо- 
тал НТМТ. Тіау, принимал участие в подготовке ХНТМТ, ХЕогтѕ, Маф МІ. идру- 
гих современных спецификаций МЗС. 

В далеком 1993 году Марк ответил Дейву так: 


Может быть, стоило бы действительно задуматься о графическом процедурном языке общего 
назначения, возможности которого позволили бы присоединять произвольные гиперссылки 
к значкам, картинкам, тексту и т. д.? Не известно ли кому-нибудь из подписчиков, как с этим 
обстоит дело в проекте Іпїептейіа? 


Тпсегтеіа — это гипертекстовый проект Брауновского университета. Работа 
над ним велась в 1985—1991 годах. Рабочей средой для Пиегте а была операци- 
онная система А/ОХ — ОМІХ-подобная среда, функционирующая на компьюте- 
рах Масіпѓоѕћ первых поколений. Мысль о «графическом процедурном языке 
общего назначения» впоследствии прижилась. Современные браузеры поддержи- 
вают как $УС-графику (декларативную разметку со встроенной возможностью 
разработки сценариев), так и <сапуа$> (процедурный интерфейс непосредствен- 
ного программирования графики). Правда, исторически <сапуа$> был проприетар- 
ным расширением для браузера и рабочая группа \/НАТ внесла его в специфи- 
кацию постфактум. 

Билл Дженсен (ВШ Јапѕѕеп) сообщил: 


Функциональность, о которой вы говорите, действительно очень ценна. Кроме Іпегтеаїа, 
есть другие системы, в которых она реализована: Апагем и Зае. В основе Апагем лежит 
система вставок. Каждой вставке присвоен определенный тип: текст, растровое изображе- 
ние, векторное изображение, анимация, электронное письмо, таблица и др. Реализовано 
рекурсивное вложение произвольной глубины, то есть вставка любого типа может быть 
вложена во вставку любого из типов, поддерживающих вложение. Так, например, можно 
поместить вставку в тексте после любого символа (если мы работаем с текстовым окном), 
в любой прямоугольной области (если мы работаем с графикой), в любой ячейке (если мы 
имеем дело с таблицей). 


Апагеу — сокращенное название системы пользовательского интерфейса 
АпЯгеж. Ее в те годы все называли Апаге\ Ртојесі. 


16 Глава 1. Как мы сюда попали? 


Тем временем Томас Файн (Тһотаѕ Ете) выдвинул альтернативное предло- 
жение: 


Я думаю так. Работу с изображениями в Сети лучше всего построить на системе МІМЕ-типов. 
А формат Роѕѕсгірї, для которого наверняка уже существует особый тип, как раз позволяет 
совмещать текстовую и графическую информацию с большим удобством. 

«Но в нем ведь не будут работать гипертекстовые ссылки», — скажете вы. Да, это так. Одна- 
ко мне кажется, что проблему решает технология Юіѕріау Роѕїѕсгірї. Если и нет, то дополнить 
до этого стандартный РозЁсйрЕ — легкая задача. Определим команду-якорь, которая бы со- 
держала ЦВЕ и интерпретировала текущий контур как замкнутую область-кнопку. Поскольку 
в Ро${сире предусмотрена прорисовка контуров, это позволяет легко делать кнопки произ- 
вольной формы. 


"ПіѕрІау Роз $ сре — технология экранной прорисовки, совместно разработан- 
ная АЯођБе и №еХТ. 

Это предложение не было реализовано. До сих пор, впрочем, время от времени 
озвучивается мысль о том, что для улучшения языка НТМІ. надо его просто чем- 
нибудь заменить. 

2 марта 1993 года Тим Бернерс-Ли оставил такой комментарий: 


В НТТР2 документам разрешено нести любой МІМЕ-тип, понимаемый клиентской программой, 
а не только какой-либо один из зарегистрированных. Это оставляет пространство для экспе- 
риментов. Думаю, Роѕіѕсгірі с поддержкой гипертекста мог бы стать предметом таких экспе- 
риментов. Не знаю, достаточно ли функциональности у Г/5р!ау Роѕіссгірі, но мне известно, что 
компания АдоБе сейчас активно продвигает свой формат РПЕ на основе Роѕссгірї. В докумен- 
тах этого формата будут работать гиперссылки, но просматривать такие документы можно 
будет только в проприетарных программах Айобе. 

Я полагал, что обобщенный язык якорей (на основе НуТіте?) позволит гипертекстовым и муль- 
тимедийным (графика/видео) стандартам развиваться независимо, что пойдет на пользу и тем 
и другим. 

Пусть лучше будет тег не ІМС, а ІМСІОРЕ, который бы ссылался на документы произволь- 
ного типа. Или ЕМВЕР, если ІМСІОРЕ звучит как директива С++ и будут ошибочно думать, 
что нужен исходный $СМЕ-код, который браузер будет разбирать (мы имеем в виду не 
это). 


НуТіте — это одна из ранних гипертекстовых систем документов, основанная 
на разметке $СМГ. В обсуждениях стандартов НТМІ. и затем ХМІ. в 1990-е годы 
о ней часто вспоминали. 

Предложенный Тимом тег <1\С0Е> так никогда и не появился, хотя отголоски 
этой идеи можно наблюдать в тегах <објесї>, <етбед> и <11гате>. 

Наконец 12 марта 1993 года Марк Андрессен написал в той же ветви дискуссии: 


Вернусь к теме встроенных изображений. Приближается выпуск Моѕаіс \0.10, в котором будет 
оговоренная ранее поддержка растровых изображений форматов СІҒ и ХВМ в тексте. [...] 
Поддерживать теги 1МСЕУБЕ/ЕМВЕР мы в настоящее время пока не готовы. [...] Вероятно, 
сейчас придется остановиться на <1Мб Ѕ5АС="игі"> (а не 1СОМ, потому что не всякое изо- 
бражение, вставленное в текст, можно назвать значком). Пока что встроенные изображения 
не типизируются явным образом; мы намерены начать поддержку графических типов впослед- 
ствии, когда речь зайдет о реализации системы МІМЕ-типов в целом. Используемые нами 
сейчас алгоритмы чтения изображений определяют формат на лету, так что даже расширение 
файла не играет никакой роли. 
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Не отрывая карандаша 


Со времен этой заочной беседы, в результате которой появился очень популярный 
общеупотребительный НТМТ-элемент, прошло почти 18 лет, но меня не перестают 
удивлять все детали ситуации. Судите сами. 


о 


До сих пор существует НТТР. Успешно развиваясь, он прошел через версии 0.9, 
1.0, позднее 1.1, и его эволюция на этом не останавливается (Ћр://\млм.іеі.ого/ 
ауп/мд/сһаќег/ҺрЫіѕ-сһаіег.Һті). 


До сих пор существует НТМІ. Этот второстепенный формат данных, в котором 
сначала не поддерживались даже значки (!), позднее представал в версиях 2.0, 
3.2 и 4.0. Историю НТМТ, если угодно, можно нарисовать на листе бумаги, не 
отрывая карандаша. Получится кривая и путаная линия с самопересечениями, 
«эволюционное древо» с многочисленными тупиковыми ветвями, отражающи- 
ми моменты, когда мысль разработчика стандартов далеко опережала практику 
программирования и верстки. Но и в современных (2011 года) браузерах веб- 
страницы, созданные в 1990 году, отображаются корректно. Недавно со своего 
новенького мобильного аппарата на платформе Араго! я открыл в браузере 
одну из таких страниц. Система даже не попросила меня подождать, «пока будет 
загружен устаревший формат». 


Лицо стандартов НТМТ, всегда определяли не только собственно стандартиза- 
торы, но и программисты (разработчики браузеров), и веб-мастера (создатели 
веб-страниц), и множество непрофессиональных любителей поговорить о ги- 
пертекстовой разметке. Успешные версии НТМТ. были, как правило, ретроспек- 
тивными и описывали существующее положение вещей, вместе с тем пытаясь 
направить развитие в нужное русло. Если кто-то будет доказывать вам, что надо 
соблюдать «чистоту» стандарта НТМТ. (то есть, по сути, что надо игнорировать 
разработчиков браузеров, или веб-мастеров, или тех и других), знайте: такой 
человек просто некомпетентен. Никогда НТМТ, не был чистым, и все попытки 
«очистить» его заканчивались провалом тех же масштабов, что и попытки чем- 
нибудь заменить его. 


Ушли со сцены не только те браузеры, которыми пользовались в 1993 году, но 
и все их потомки. Месаре М№ауіваќог прекратил свое существование в 1998 году. 
Будучи переписан с нуля, он вошел в состав Мо7Ша ЗиКе, ответвлением в раз- 
витии которого стал современный Еех. Робкий первый шаг истории П\цегпе 
ЕхрІогег можно усмотреть в браузере из пакета дополнений МісгоѕоЁє Р!а$! 
к операционной системе \/т4о\з 95, где содержались также игра Пинбол и темы 
Рабочего стола. 


До сих пор сохранились некоторые операционные системы из числа тех, кото- 
рыми пользовались в 1993 году, но ни одной из них не принадлежит сколько- 
нибудь значительная доля пользователей сети. Сейчас выходят в Интернет 
с персональных компьютеров из-под №іпіо%ѕ версии 2000 или более поздней, 
с Масіпѓоѕћ из-под Мас ОЗ Х, с компьютеров из-под разных дистрибутивов 
Глпих, а также с устройств карманного формата вроде іРћопе. Вспомним, что 
в 1993 году версия 3.1 системы УЛ о\$ сражалась за рынок с О$/2, на Масіпіоѕћ 
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работала Зузет 7, а Глпих распространялся среди пользователей Озепеб. Это 
времена Тгитреё \іпѕоск и МасРРР, по которым испытывают неудержимую 
ностальгию старые интернет-пользователи. 


О Ктому, что сейчас называется попросту веб-стандартами, до сих пор (почти 
через 20 лет!) имеют отношение некоторые из участников той беседы 1993 года. 
Иные из них еще в 1980-е годы и даже ранее работали над более старыми про- 
ектами, родственными НТМГ. 


О Поскольку зашла речь о проектах-предшественниках, то отмечу, что в эпоху 
всеобщей популярности НТМТ. и Интернета другие (мощно повлиявшие на 
них) форматы и системы рубежа 1980—1990-х годов оказались прочно забытыми. 
Скажите, приходилось ли вам раньше слышать о проектах Апаге\ и Пцегте а? 
Или о системе НуТипе? А ведь НуТіте — это не какая-нибудь недолговечная 
академическая разработка. Она была [ЗО-стандартизована для военных нужд, 
с ней связывали большие ожидания, и вокруг нее крутились большие деньги, 
как вы можете прочесть в статье Һ&р://мму.ѕдтіѕоигсе.соту/һіѕіогу/ҺһіѕЕ, Нат. 


Однако все эти теоретические рассуждения не дают ответа на самый первый 
наш вопрос: откуда взялся тег <іпд>? Почему не суждено было возникнуть тегу 
<ісоп> или <іпс1ийе>? Почему мы не пользуемся гиперссылками с атрибутом 
іпс1иде или каким-либо сочетанием ссылочных отношений? Что обусловило 
решающий перевес именно в пользу <119>? Ответ прост: Марк Андрессен вы- 
пустил в свет программу, где была реализована поддержка именно <119>, а вы- 
пуск решает дело. 

Нельзя сказать, что так происходит всегда. Ведь создатели Апагеху, Іріегтейіа 
и НуТіте тоже выпускали приложения в свет. Работающий опубликованный 
код — это необходимое, но не достаточное условие успеха. Разумеется, я не хочу 
сказать, что выпуск программной реализации до утверждения стандарта решает 
все проблемы. Напротив, введенный Марком тег <119> не оговаривал единого 
формата графики; никак не было определено обтекание картинки текстом; не 
поддерживались текстовые альтернативы и заместительное содержимое для бо- 
лее старых браузеров. Сейчас, 18 лет спустя, мы все еще сражаемся с контент- 
сниффингом, который продолжает служить источником большого количества 
уязвимостей. Историю борьбы со всеми этими проблемами можно проследить от 
наших дней через эпоху «великих войн браузеров» вплоть до того самого 25 фев- 
раля 1993 года, когда Марк Андрессен мимоходом заметил: «Может быть, когда- 
нибудь с помощью МІМЕ-типов...» — и решил все-таки выпустить свою реали- 
зацию. 


Основные вехи развития НТМЕ 
в 1997—2004 годах 


В декабре 1997 года Консорциум Всемирной паутины (\/ ЗС) опубликовал специ- 
фикацию НТМТ. 4.0, и почти сразу же полномочия рабочей группы, ответственной 
за выработку стандарта НТМТ,, были прекращены. Менее чем через два месяца 
после этого другая рабочая группа Консорциума опубликовала стандарт ХМТ. 1.0. 
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Прошло еще месяца три, и по инициативе ҰЗС был проведен семинар «Контуры 
будущего НТМІ», от участников которого ожидали ответа на вопрос: «Должен ли 
М/ЗС остановить работу над НТМІ?» Участники дискуссии сошлись на таком 
вердикте: 


Обсуждение показало, что было бы чересчур трудоемкой процедурой как расширять НТМЕ 4.0, 
так и превращать его в ХМі-приложение. Чтобы освободиться от сдерживающих факторов, 
предлагаем начать разработку нового поколения стандарта НТМІ на основе набора ХМІ- 
тегов. 


Для создания такого набора ХМТ-тегов ҰЗС вновь созвал рабочую группу 
НТМІ. В первую очередь в декабре 1998 года члены группы написали промежуточ- 
ную спецификацию, которая переформулировала существующие элементы и атри- 
буты НТМІ. в терминах ХМТ; никаких новых элементов и атрибутов добавлено не 
было. Эта спецификация позднее стала известна как ХНТМІ. 1.0. Она определяла 
новый М МЕ-тип для документов ХНТМГ: арр1ісаїіоп/хһїіті+хт1. Упростить для 
уже существующих страниц (НТМІД4) переход на новый стандарт было призвано 
приложение С, в котором кратко излагались «указания по дизайну для веб-мастеров, 
которые хотели бы, чтобы их ХНТМТ-документы корректно отображались в поль- 
зовательских агентах, существующих для стандарта НТМІ». Приложение С гласит, 
что можно создавать страницы, условно называемые ХНТМЕ-страницами, и осна- 
щать их М МЕ-типом їехі/їт1. 

Следующим пунктом на повестке дня для рабочей группы НТМІ. были веб- 
формы. В августе 1999 года члены группы опубликовали первый вариант стандар- 
та ХНТМІ. Ежепаеа Еогтпѕ. В самых первых строках этого документа (ҺЋіёр://\ммм. 
№3.0г9/76/1999/\\0-хһіті-Ғогтѕ-гед-199 90830#іпіго) сказано, какие ожидания на него 
возлагаются. 

При внимательном рассмотрении рабочая группа НТМТ. нашла, что к задачам 
нового поколения веб-форм не может относиться обратная совместимость с брау- 
зерами, предназначенными для отображения документов более ранних версий 
НТМЕ. Наша цель — построить ясную современную модель форм (далее расши- 
ренные формы ХНТМТ. — ХНТМІ. Ежепде4 Рогтз), которая была бы основана 
на совокупности тщательно оговоренных требований. Требования, которые опи- 
саны далее в этом документе, своей отправной точкой имеют опыт эксплуатации 
самых разнообразных приложений на формах. 

Еще через несколько месяцев документ ХНТМІ. Ежепае4 Еогтѕ был переиме- 
нован в ХЕогтѕ и к его доработке приступила специально сформированная рабо- 
чая группа. Она вела свои обсуждения параллельно с рабочей группой НТМІ. 
и опубликовала первую официальную версию стандарта ХЕогииз 1.0 в октябре 
2003 года. 

После того как переход на ХМТ. был завершен, члены рабочей группы НТМІ. 
задумались о том, чтобы наконец создать «новое поколение стандарта». В мае 
2001 года вышло первое издание ХНТМІ. 1.1, где поверх ХНТМІ 1.0 было до- 
бавлено совсем немного функциональности и перестала существовать прежняя 
лазейка для веб-мастеров, оговоренная в приложении С. Все документы ХНТМТ, 
начиная с версии 1.1, оснащаются МІМЕ-типом арр1ісаііоп/ хит] +хт1. 
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Все, что вы знаете об ХНТМЕИ, — это ложь 


Почему так важны МІМЕ-типы? Почему я не устаю возвращаться к ним? При- 
чиной тому «драконовская» обработка ошибок. 

Браузеры всегда очень мягко обходились с ошибками в НТМТ-коде. Если, на- 
пример, вы создали НТМТ-страницу без тега < 11 е>, то браузер все равно отобра- 
зит ее, несмотря на то что всегда, во всех версиях стандарта НТМІ. присутствие 
элемента <1111е> на странице требовалось безоговорочно. Некоторые теги нельзя 
вкладывать в другие теги, но, если вы создадите страницу, нарушающую это тре- 
бование, браузер все равно каким-то одному ему ведомым способом сумеет ото- 
бразить ее, не выводя сообщения об ошибке. 

Как нетрудно догадаться, тот факт, что «кривая» НТМТ-разметка все же ото- 
бражается в браузерах, позволил беззаботным веб-программистам создать много 
«кривых» страниц. Очень много. По некоторым оценкам, сейчас в Сети свыше 99 % 
всех НТМГ-страниц содержат не менее одной ошибки верстки каждая. Но при 
таких ошибках браузеры не выводят предупреждения — вот почему «кривой» 
НТМГ-код никто никогда не правит. 

Видя в этом одну из фундаментальных проблем современного Интернета, спе- 
циалисты ҰЗС задумались о ее решении. Опубликованный в 1997 году стандарт 
ХМІ. нарушил традицию мягкой обработки ошибок в клиентских программах. 
Согласно этому стандарту, все программы отображения и обработки ХМТ. должны 
воспринимать ошибки структуры документа как фатальные. Система, при которой 
первая же ошибка вызывает сбой, стала известна как «драконовская» обработка 
ошибок, названная так по имени афинского вождя Дракона (в иных источниках: 
Драконта). Введенные им законы предписывали карать смертью даже незначитель- 
ные проступки. После того как Консорциум переформулировал НТМТ. в терминах 
ХМГ-словаря, ответственные лица постановили, чтобы обработка ошибок в до- 
кументах нового МТМЕ-типа арр1ісаїіоп/ хи +хи была «драконовской». Иными 
словами, если бы в код вашей ХНТМІ -страницы закралась одна-единственная 
неточность, браузеру пришлось бы остановить работу и показать пользователю 
(посетителю страницы) сообщение об ошибке. 

Эту идею приняли не все. Как уже говорилось, 99 % веб-страниц не свободно от 
ошибок и поэтому при использовании арр11са1оп/ хит +хт есть высокие шансы, 
что конечный пользователь не увидит страницы. И хотя новая функциональность 
ХНТМЕ 1.0 и 1.1 все же очень привлекательна, веб-программисты преимуществен- 
но избегали использовать тип арр1ісаїіоп/хћт1+хт1. Это, разумеется, не значит, что 
они игнорировали также и весь стандарт ХНТМГ.. Совсем наоборот. Приложе- 
ние С спецификации ХНТМІ 1.0 предоставляло ту самую лазейку, о которой уже 
сказано выше. По сути, веб-мастеру говорили: «Пользуйся синтаксисом в духе 
ХНТМІ, но оснащай страницу МТМЕ-типом ёехї/ћіті». Многие разработчики так 
и поступали: фактически перейдя на ХНТМІ -синтаксис, они по-прежнему ис- 
пользовали тип їехі/һіті. 

В наши дни в коде очень многих веб-страниц в первой строке объявлен тип 
документа ХНТМГ, имена тегов набраны строчными буквами, значения атрибу- 
тов взяты в кавычки, а при оформлении одиночных тегов применяется косая чер- 
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та, например <Бг />, <!г />. Но МІМЕ-тип арр1ісаїіоп/хһїті+хт1, включающий 
«драконовскую» обработку ошибок по правилам ХМІ., определяется лишь в ни- 
чтожном меньшинстве таких страниц. Любую страницу МІМЕ-типа ёехі/һїтї, 
невзирая на объявленный тип документа, синтаксис и стиль, разбирает НТМТ- 
парсер, очень лояльный к ошибкам. Он молча терпит некорректную разметку, не 
уведомляя о ней ни конечного пользователя, ни вообще кого-либо. 

Итак, лазейка имелась в ХНТМІ 1.0, авХНТМУ. 1.1 ее закрыли. Неоконченный 
набросок спецификации ХНТМТ. 2.0 тоже предусматривает последовательную 
«драконовскую» обработку ошибок. Вот почему о своем соответствии стандарту 
ХНТМТ. 1.0 заявляют много миллиардов страниц, тогда как на разбор по правилам 
ХНТМТ. 1.1 или ХНТМІ. 2.0 претендует очень-очень мало веб-документов. Теперь 
задумайтесь: действительно ли вы пользуетесь ХНТМІ? Ответить поможет МІМЕ- 
тип (если вам вообще неизвестно, каким МТМЕ-типом вы пользуетесь, могу почти 
наверняка сказать, что это по старинке їехї/ћт1). Ваш так называемый ХНТМІ. 
будет ХМГ.-форматом лишь по названию все то время, пока вашим веб-страницам 
не задается тип арр1ісаііоп/ хит +хт1. 


Альтернативная точка зрения 


В июне 2004 года ҰЗС провел семинар по веб-приложениям и сложным докумен- 
там. На семинаре присутствовали представители фирм, производящих браузеры, 
компаний, занимающихся веб-разработкой, и других организаций — членов ҰЗС. 
Во время мероприятия группа заинтересованных сторон (в числе которых были 
Мо7Ша Еоиріайоп и Орега ЅоЁсуаге) презентовала свой альтернативный взгляд на 
будущее Интернета: эволюция стандарта НТМІД путем включения в него новых 
функций для нужд разработчиков современных веб-приложений (Һр://мму.№3. 
0гд/2004/04/меБаррз-са#-м5/рарег$/орега.Нт!). 


Важнейшие требования к работам в этом направлении могут быть, на наш взгляд, выражены 
следующими семью принципами. 

Обратная совместимость, ясный путь преобразований 

Веб-приложения должны быть основаны на известных веб-мастерам технологиях, таких как НТМЕІ, 
С55, РОМ и Јағабсгірї. Базовая функциональность веб-приложений должна быть реализуемой 
в наши дни средствами 1Е6, чтобы путь дальнейших преобразований был ясен веб-мастерам. 
Крайне маловероятен успех какого-либо решения, которое не поддерживают (без установки ис- 
полняемых приложений) пользовательские агенты, доминирующие сейчас на рынке. 

Хорошо продуманная обработка ошибок 

Обработка ошибок в веб-приложениях должна быть настолько детализирована, чтобы поль- 
зовательским агентам не приходилось в этих целях создавать собственные механизмы обра- 
ботки ошибок или проводить обратную разработку [соответствующих механизмов] других 
пользовательских агентов. 

Ошибки верстки не следует показывать пользователю 

Для каждого из возможных сценариев ошибки спецификация должна указывать точный способ 
исправления ошибки. В обработке большей части ошибок нужно «мягкое» исправление, как 
в С55, а не катастрофическая остановка работы, как в ХМІ. 

Практическая значимость 

Каждую функцию, вносимую в стандарт веб-приложений, должен оправдывать случай исполь- 
зования на практике. Обратное, вообще говоря, неверно: не каждый пример практического 
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использования подтверждает значимость функции. Самыми удачными следует считать при- 
меры с действующих сайтов, на которых для обхода ограничений ранее использовался неудач- 
ный путь. 

Сценарии надо сохранить 

Но там, где более удобна декларативная разметка, ими не следует злоупотреблять. Сценарии 
должны быть нейтральны к типу устройства и способу представления, кроме тех, что работа- 
ют на конкретных устройствах (например, внесенных в базу ХВ). 

Следует избегать профилирования под конкретное устройство 

В десктопной и мобильной версиях одного и того же пользовательского агента веб-мастерам 
должен быть предоставлен один и тот же набор функций. 

Открытый процесс 

Разработка в открытой среде пошла на пользу современному Интернету. Поскольку веб- 
приложения — это ядро будущего Всемирной паутины, их разработку тоже следует сделать 
открытой. Доступ к дискуссионным листам, архивам и черновикам спецификаций должен быть 
все время открыт для посетителей. 


Было проведено неофициальное голосование, в рамках которого участников 
семинара попросили ответить на вопрос: «Должен ли \/ЗС разрабатывать декла- 
ративные расширения НТМТ, С$5 и императивные расширения РОМ для обслу- 
живания потребностей веб-приложений среднего уровня (то есть расширения, 
уступающие по своему масштабу полноценным АРІ уровня операционных си- 
стем)?> Было получено 8 голосов «за» и 11 — «против». Подводя итоги работы 
семинара (Һ&р://ммм.м3.019/2004/04/меБаррѕ-сағмѕ/ѕиттагу), члены МЗС писали: 
«В настоящее время \/ЗС не намеревается вкладывать средства в третью из тем, 
вынесенных на неофициальное голосование: расширения НТМІ и С$$ для нужд 
веб-приложений. Это не касается технологий, уже разрабатываемых в настоящее 
время рабочими группами МЗС». 

Перед теми, кто предлагал развивать далее НТМІ и веб-формы, открылось два 
пути: или махнуть на все рукой, или продолжить свою деятельность вне МЗС. Был 
выбран второй вариант, и в июне 2004 года, вслед за регистрацией доменного име- 
ни мћаёбмд.огд9, появилась рабочая группа НАТ. 


\УНАТ? Что?! 


Что это вообще за группа — НАТ? Предоставлю слово им самим (Һр://ммм. 
мһаїмд.огд/пемѕ/ѕіагі). 


Рабочая группа по вопросам технологии гипертекстовых веб-приложений (\МеБ Нурегїехі 
Арріісайопѕ Тесппоюду) — это форма свободного, неофициального, открытого сотрудничества 
между разработчиками браузеров и любыми заинтересованными лицами. Группа видит свою 
цель в том, чтобы на основе НТМІ и родственных технологий выработать спецификации, ко- 
торые облегчили бы развертывание совместимых веб-приложений. Предполагается, что ре- 
зультаты деятельности группы будут переданы стандартизующей организации и послужат 
основой для формального расширения НТМІ в области стандартов. 

Созданию этого форума предшествовало несколько месяцев частной переписки о специфика- 
циях веб-технологий. Так сложилось, что в настоящее время мы заняты в основном дополне- 
нием НТМЕ4-форм востребованными функциями без нарушения обратной совместимости. 
Группа была создана с тем, чтобы дальнейшее развитие этой и других спецификаций стало 
совершенно открытым и велось на дискуссионном листе с общедоступным архивом. 
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«Без нарушения обратной совместимости» — ключевые слова этого пассажа. 
ХНТМЕ (за вычетом той возможности, которую открывает Приложение С) не 
является, вообще говоря, обратно совместимым с НТМІ и требует отдельного 
МТМЕ-типа. Все содержимое, помеченное этим типом, будет подлежать «драко- 
новскому» механизму обработки ошибок. ХЕогтз также не обладает обратной 
совместимостью с НТМІ -формами, потому что формы ХЕогтѕ можно использо- 
вать только в документах с новым МІМЕ-типом (и, следовательно, «драконов- 
ской» обработкой ошибок). Все дороги ведут к МТМЕ-типизации. 

Рабочая группа \/НАТ не стала задаваться вопросом, принесли ли какую- 
нибудь пользу десять лет инвестиций в НТМІ.. Не стала она и нарушать работу 
99 % страниц Интернета. Участники группы пошли другим путем — путем до- 
кументирования алгоритмов «мягкой» обработки ошибок в современных брау- 
зерах. Браузеры всегда «прощали» ошибки в НТМТ-коде, но почему-то никому 
не приходило в голову подробно описать, как это происходит. И вот Меё5саре 
пытался имитировать обработку «кривых» страниц теми алгоритмами, которые 
были в МСЅА Мозас. Потом Пцегпеё ЕхрІогет, в свою очередь, пытался имити- 
ровать Ме{зсаре; затем Орега и Еігеѓох пытались имитировать Пцегпеё Ехрогег; 
потом Ѕаѓагі пытался имитировать Еігеѓох и т. д. вплоть до настоящего времени. 
У разработчиков ушло много тысяч часов только на то, чтобы обеспечивать в этой 
части единообразие работы своих и конкурирующих продуктов. 

Этот огромный труд, к счастью, уже закончился. За несколько лет рабочая 
группа \/НАТ смогла успешно документировать (за вычетом нескольких неясных 
предельных случаев) алгоритм разбора НТМТ, совместимый с существующим 
веб-содержимым. Нигде в этом алгоритме нет такого шага, как остановка работы 
пользовательского агента и вывод сообщения об ошибке. Одновременно с этой 
процедурой обратной разработки группа НАТ занималась и множеством других 
вещей. В их числе была спецификация, первоначально названная Мер Еогтѕ 2.0, 
которая предусматривала новые типы элементов управления в веб-формах (боль- 
ше о веб-формах вы прочтете в главе 9). Еще один подобный черновой документ — 
Уер Арріісайопѕ 1.0 — был посвящен веб-приложениям и предусматривал много 
новых функций, таких как непосредственный интерфейс рисования — холст 
(см. главу 4) и встроенная, без специальных приложений, поддержка видео и аудио 
(см. главу 5). 


И снова о МЗС 


На протяжении нескольких лет МЗС и рабочая группа \/НАТ совершенно не ин- 
тересовались друг другом. Специалисты НАТ сосредоточились на веб-формах 
и новых функциях НТМГ, а созванная ҰЗС рабочая группа НТМІ. была занята 
разработкой версии 2.0 стандарта ХНТМГ.. Впрочем, к октябрю 2006 года стало 
ясно, что группа НАТ обрела широкую поддержку, в то время как ХНТМТ. 2 все 
еще томился в черновиках и не был реализован ни в одном популярном браузере. 
Тогда Тим Бернерс-Ли, основатель Консорциума Всемирной паутины ҰУЗС, объявил 
о начале совместного труда МЗС и группы МНАТ над развитием НТМЕ. (ћ&р://аід. 
сѕаії.ті&.еаи/БгеаасгитЬѕ/пойе/166). 
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ПЫ 


Глава 1. Как мы сюда попали? 


Спустя несколько лет некоторые факты становятся яснее. НТМІ надо развивать постепенно. 
Попытка сразу переучить всех на ХМІ с его обязательными кавычками вокруг значений атри- 
бутов, обратными слешами в одиночных тегах и пространствами имен не удалась. НТМЕ- 
верстальщики в своем большинстве не изменили навыков во многом потому, что этому по- 
творствовали браузеры. Есть большие сообщества, которые перешли на новый стандарт 
и теперь наслаждаются благами правильной системы, но таковы не все. Следует дорабаты- 
вать НТМІ шаг за шагом, чтобы тем самым постепенно делать мир правильнее, гармоничнее, 
получать власть над гармонией этого мира. 

Наш план — созвать совершенно новую группу НТМЕ. В отличие от предшественников, ее со- 
трудники будут уполномочены последовательно улучшать НТМІ и вместе с тем ХНТМЕ. У этой 
группы будет другой председатель и другой контактный адрес. Работа над НТМІ и ХНТМЕ будет 
вестись совместно. Мы уже заручились поддержкой этого начинания со стороны многих лиц, 
в том числе разработчиков браузеров. 

Ожидается также работа над веб-формами. Эта область проблематична ввиду того, что суще- 
ствуют и НТМЕ-формы, и ХРогтѕ. НТМЕ-формы распространены повсеместно, но у ХРогт$ так- 
же немало реализаций и пользователей. Между тем большие дополнения к НТМ!-формам 
предлагает проект спецификации МерБ Рогтѕ. В связи с этим планируется расширять НТМЕ- 


формы. 


Одним из первых пунктов на повестке дня вновь созванной ҰЗС рабочей груп- 
НТМІ. было переименовать ҰеЬ Арр|сайопз$ 1.0 в НТМТ.5. Вот мы и пришли 


сюда, готовые к постижению глубин НТМТ.. 


Послесловие 


Во 


ктябре 2009 года Консорциум прекратил деятельность рабочей группы стандар- 


та ХНТМІ. 2. Решение было объяснено так (Һр: //\уму.№3.019/2009/06/хһті-ғад. 
Һет): 


Когда в марте 2007 года МЗС объявил о начале деятельности рабочих групп НТМЕ и ХНТМЕ 2, 
было отмечено, что Консорциум продолжит наблюдать за потенциальным рынком ХНТМЕ 2. 
М/ЗС сознает, как важно дать сообществу разработчиков недвусмысленный знак относительно 
будущего НТМЕ. По этой причине, признавая ценность многолетнего труда рабочей группы 
ХНТМЕ 2, администрация МЗС после совещания с участниками Консорциума решила ограни- 
чить полномочия данной рабочей группы 2009 годом и далее их не продлевать. 


Итак, кто выпускает программы, тот и заказывает музыку. 


Для дальнейшего изучения 


о 


О 


«История Сети» (Һір://һіхіе.сһ/соттепќагу/меБ/һіѕќогу) — неоконченная старая 
статья Яна Хиксона (Тап Ніскѕоп). 

«НТМЕ/История» (Һіёр://му.лЗ.ого/Һті/мо/\іКі/Ніѕёогу) — публикация Майк- 
ла Смита (МісһаеІ Эш В), Генри Сивонена (Непргі Ѕіуопеп) и нескольких со- 
авторов. 

«Краткая история НТМІ» (ћ&р://аёепаеѕідпдгоир.сот/Біод/Бгіеё-Һіѕогу-ҺтГ) — 
статья Скотта Рейнена (Ѕ$соїё Веупеп). 


Тестирование функций 
НТМІ5 в браузере 


Приступим 


Вы могли бы, конечно, спросить: «Как же мне начинать пользоваться НТМТ.5, если 
старые браузеры его не поддерживают?» Но сама постановка такого вопроса оши- 
бочна. НТМІ5 — это не единый большой инструмент, а совокупность отдельных 
функций, поэтому «поддержку НТМТ.5» вообще нельзя протестировать: это вы- 
ражение бессмысленно. Но можно проверить, поддерживает ли браузер отдельные 
нововведения: холст, видео, геолокацию и др. 


Способы тестирования браузера 


При прорисовке страницы браузер строит объектную модель документа (ОМ) — 
набор объектов, которыми представляются НТМТ--элементы страницы. Каждый 
тег — <р>, <91\>, <ѕрап> и т. д. — представляется в ООМ-структуре отдельным объ- 
ектом (есть также глобальные объекты — окно и целый документ, не привязанные 
к специфическим НТМГ-элементам). 

У всех ООМ-объектов есть общие свойства, но у некоторых объектов их больше, 
чем у других. Более того, в браузерах, поддерживающих НТМТ.5-функциональность, 
какие-то объекты будут располагать уникальными свойствами. Поддерживается ли 
та или иная функция, можно увидеть, заглянув в РОМ. 

Существуют четыре основных способа тестирования браузера на предмет под- 
держки разных возможностей НТМТ.. Рассмотрим их по порядку, от простейше- 
го к более сложным. 


1. Проверить, определено ли нужное свойство для такого глобального объекта, как 
міпаом или пау1дафог. 


Пример — поддержка геолокации. Как протестировать браузер на ее наличие, 
читайте в разделе «Геолокация» данной главы. 


2. Создать элемент и проверить, определено ли для него нужное свойство. 
Пример — поддержка рисования. О ней вы узнаете в разделе «Холст» этой главы. 


3. Создать элемент, проверить, определен ли для него нужный метод, затем вы- 
звать этот метод и посмотреть на возвращенное им значение. 
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Пример — поддержка видеоданных разных форматов. О ней читайте в разде- 
ле «Форматы видео» этой главы. 


4. Создать элемент, установить для него нужное значение какого-либо свойства, 
затем проверить, сохраняет ли свойство данное значение. 


Пример — поддержка разных типов полей ввода. О ней вы узнаете в разде- 
ле «Типы полей ввода» данной главы. 


Модегпі2г: библиотека для тестирования 
НТМІ5-функций 


Модегпілхг (НЕр://млмми.подегиг.сот) — это ЈауаЅсгірі-библиотека, распространяемая 
под лицензией МІТ с открытым исходным кодом. Для большинства возможностей 
НТМІ5 и С$$3 она предоставляет простой способ проверить, поддерживает ли их 
исследуемый браузер. На момент написания этой книги последняя версия Мойегпіхг 
имела номер 1.1!. Обязательно применяйте самую новую версию. Для использования 
Моаегпіхг надо включить в головную часть страницы следующий тег <5сгірі>: 


<ТрОСТҮРЕ һіт1> 
<Піт1> 
<пеаа> 

<тефа сһагѕеї="иЁ?-8"> 

< е>Название моей страницы</1Те> 

<Ѕсгірї згс="тодеги1 иг. пи. јѕ"></5сгірі> 
</һеаа> 
<роду> 
</роду> 
</һіт1> 

Мойегпіхг запускается автоматически, поэтому нет необходимости в функции 

подегпіхг 1п1(), которая бы вызывала ее. При запуске библиотека Мойегпіхг создает 
одноименный объект с набором булевозначных свойств, по одному на каждую рас- 
познаваемую функцию. Так, например, если ваш браузер поддерживает АРІ рисования 
(см. главу 4), то свойство Мойегптіхг.сапуаѕ примет значение ігие, а если нет — Ға15е: 


1Е (Модеги1тг.сапуаз) { 
// порисуем! 
} ее { 
// тег <сапуаѕ> не поддерживается, печаль : ( 


} 


Холст 


В НТМІ5 тег <сапуа$> (Һр://ЬЇ.1у/9ЈН20#) определен как «холст для зависимой от 
разрешения растровой графики, с помощью которого могут динамически прори- 


' В январе 2011 года были доступны стабильная версия 1.6 и бета-версия 2.0. — Примеч. 


перев. 
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совываться диаграммы, графика игр и прочие изображения». На странице холст 
имеет вид прямоугольника, в границах которого можно рисовать с помощью 
ЈахаЅсгірё. В НТМТ.5 определен «АРГрисования» — набор функций, позволяющих 
рисовать разные фигуры и контуры, создавать градиентную заливку, преобразо- 
вывать графику. 

Протестировать поддержку АРГрисования можно способом 2 (см. раздел «Спо- 
собы тестирования браузера» этой главы). Если <сапуаз> поддерживается в брау- 
зере, то для ПОМ-объекта, представляющего тег <сапуаз>, будет определен метод 
деїСопїехї() (см. раздел «Простые фигуры» главы 4). Если же поддержки рисова- 
ния в браузере нет, то созданный объект не будет иметь характеристик холста. Под- 
держивается ли <сапуаз>, можно проверить с помощью такой функции: 


#ипсёіоп ѕиррогіѕ сапуаѕ() { 
гефиги ! !аоситепі. сгеаёеЕТетепі (' сапуаѕ') .оеЕСопіехї; 
} 


В единственной ее строке сначала создается пустой тег <сапуаз>: 


гефиги ! !аоситепї. сгеаёеЕТетеп ( 'сапуа$') .одеЕСопТехі; 


Он не связан с какой-либо областью страницы и не будет отображаться на 
экране. Ничего не делая, он просто тихо покачивается на волнах оперативной 
памяти. 

После создания пустого тега <сапуаѕ> надо проверить, определен ли для него 
метод деїСопїехЕ(). Этот метод определен только в том случае, если браузер под- 
держивает АРІ рисования: 


гефиги !!аоситей® . сгеаёеЕТетепі('сапуаѕ') . деЕСопёехі; 


Наконец, двойное отрицание заставляет систему вывести значение булевого 
типа (гие или Ға15е). 


гефиги !!адоситей® . сгеаёеЕТетепё(‘сапуаѕ’) .одеЕСопТехі; 


Данным способом можно исследовать, поддерживается ли в браузере большин- 
ство функций АРІ рисования: фигуры (см. раздел «Простые фигуры» главы 4), 
контуры (см. раздел «Контуры» главы 4), градиенты (см. раздел «Градиенты» гла- 
вы 4) и узоры. Таким образом, не может быть обнаружена поддержка сторонней 
библиотеки ЕхрІогегСапуаѕ (см. раздел «А что в ІЕ?» главы 4), реализующей АРТ 
рисования в Пицегпеё Ехр[огег. 

Чтобы не писать собственную функцию для проверки того, поддерживается ли 
в браузере АРІ рисования, прибегните к помощи МоЯегпіхг (см. предыдущий раз- 
дел): 

ЇЁ (Модегпіғғ.сапуаѕ) { 

// порисуем! 
} е1ѕе { 

// тег <сапуаѕ> не поддерживается : ( 
} 


АРІ рисования текста нужно тестировать особо, о чем и пойдет речь далее. 
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Рисование текста 


Если даже ваш браузер поддерживает тег <сапуаѕ> и АРІ рисования, в нем может 
не быть поддержки АРІ рисования текста. Инвентарь функций рисования расши- 
рялся постепенно, текстовые функции были добавлены сравнительно поздно, и не- 
которые браузеры с поддержкой рисования вышли в свет прежде, чем разработка 
текстового АРІ была завершена. 

Протестировать поддержку АРІ рисования текста вновь позволяет способ 2 
(см. раздел «Способы тестирования браузера» этой главы). Если рисование текста 
в вашем браузере поддерживается, то для ООМ-объекта, представляющего тег 
<сапуа$>, будет определен метод деїСопїехї() (см. раздел «Простые фигуры» гла- 
вы 4), а если нет, то соответствующий ООМ-объект не будет располагать свой- 
ствами, специфичными для холста. Проверить, работает ли в браузере рисование 
текста, вам поможет такая функция: 


Ғипсёіоп ѕиррогіѕ сапмаѕ фехё() { 
ЇР (!ѕиррогіѕ сапмаѕ()) { геёигп ?а1ѕе; } 
уаг Читту сапуа$ = доситепі . сгеаёеЕТетепі( ' сапуаѕ'); 
уаг сопіехі = дитту сапуаѕ .деёСопіехі( '21'); 
гебиги фуреот сопіехі.#111Техі == 'Ғипсіоп'; 


В начале кода этой функции вызывается ранее написанная нами функция 
ѕиррогіѕ сапуаѕ(), которая тестирует поддержку АРІ рисования: 


1Р (!1ѕиррогіѕ сапуаѕ()) { гефиги Ға1ѕе; } 


Понятно, что, если браузером не поддерживается тег <сапуаѕ>, то и рисование 
текста в нем будет невозможно. 

Теперь создадим пустой тег <сапуа$> и выясним его контекст рисования. Это 
непременно удастся сделать, так как функция ѕиррогіѕ сапуаѕ() уже удостоверилась 
в том, что метод де Сопехе() определен для всех объектов-холстов: 


уаг Читту сапуа$ = Чоситей® . сгеаеЕ1етепї ( 'сапуаз'); 
уаг сотбехё = аитту сапуаѕ. де Сопёехі( ‘21 ); 


Выясним, наконец, существует ли в контексте рисования функция ?і11Техі(). 
Если да, то АРТрисования текстом доступен: 


гефиги Туреот сопбехё. #1 11Техё == 'Ғипсїїоп'; 
Чтобы не писать собственную функцию, прибегните к помощи Мо4егтияг: 


і? (Модегпіхг.сапуаѕехі) { 
// порисуем текст! 
} ее { 
// порисовать текст не удастся : ( 


Видео 


В НТМГ5 появился новый тег <\/14е0>, предназначенный для встраивания видео- 
фрагментов в веб-страницы. Раньше это было невозможно без сторонних приложе- 
ний, таких как АррІе ОшсКТите и АЯођБе Е1аѕћ. 
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Спецификация тега <\14е0> такова, что его можно использовать без вспомога- 
тельных сценариев. Если указать несколько видеофайлов одного и того же содер- 
жания, то браузер с поддержкой НТМТ.5-видео сам выберет, исходя из поддержи- 
ваемых форматов, какой из них показать пользователю". 

Браузеры, которые не поддерживают НТМТ.5-видео, совершенно игнорируют 
теги <уійео>. Но этот факт можно обратить в свою пользу и заставить браузер 
воспроизводить видео с помощью стороннего приложения. Такое решение пред- 
ложил Крок Кэмен (Ктос Сатеп). Его разработка У14ео юг ЕуегуБђойу! («Видео 
для каждого», Һр://сатепаеѕідп.сот/соае/мійео_Ғог_емегубойу) позволяет опирать- 
ся на возможности НТМТ.5-видео там, где они присутствуют, а в более старых 
браузерах пользоваться ОшсКТипе или Е1аѕћ. Разработка Кэмена построена не 
на основе ЈауаЅсгірі и поэтому может обслуживать, в принципе, любой браузер, 
в том числе мобильный. 

Чтобы выполнять с видеоданными кое-какие операции посложнее, чем только 
вставка на страницу и воспроизведение, надо пользоваться ]ауазст!ре. Протести- 
ровать поддержку видео можно способом 2 (см. раздел «Способы тестирования 
браузера» этой главы). Если в браузере поддерживается НТМТ.5-видео, то для 
РОМ-объекта, соответствующего тегу <\14е0>, будет определен метод сапРТауТуре(), 
а при отсутствии поддержки НТМТ.5-видео набор свойств ОО М-объекта будет 
стандартным. Проверить, работает ли в браузере новая видеофункциональность, 
вам поможет следующая функция: 


Ғипсёіоп ѕиррогіѕ уідео() { 
гебиги ! !аоситепї. сгеаёеЕТетепЕ( 'уіаео' ) .сапРТауТуре; 


} 


Чтобы не писать собственную функцию, прибегните к помощи МоЯегпіхг (см. раз- 
дел «МоЯегпіхг: библиотека для тестирования НТМТ.5-функций» этой главы): 


1Е (Модегпіғг.уідео) { 
// воспроизведем ролик! 
} ее { 
// встроенной поддержки видео нет, 
// надо пользоваться ОиіскТіте или Еаѕћ 


} 


Отдельно нужно определять, какие форматы видео умеет воспроизводить бра- 
узер. Об этом — следующий раздел. 


Форматы видео 


Форматы видеоданных сродни разным языкам. В английской газете может быть 
написано то же самое, что и в испанской, но если вы умеете читать только по- 
английски, то вторая газета будет вам без надобности (во всяком случае для чте- 
ния). Так и с видео: чтобы воспроизвести ролик, браузер должен знать «язык» его 
данных. 


О различных форматах видео читайте «Элементарное введение в кодировки видеодан- 
ных»: часть 1 «Форматы файлов» (ћср://іуеіпѓіотагк.оге/агсһіуеѕ/2008/12/18/віүе- 
раг(-1-сопбатег-Югта$) и часть 2 «Видеокодеки, сжимающие с потерями» (В р:// 
діуеіпсотагК.оге /агсһіуеѕ/2008/12/19/ріуе-рагі-2-10ѕѕу-уійео-сойесѕ). — Примеч. авт. 
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«Языки» видеоформатов называются кодеками. Кодек — это алгоритм, в соот- 
ветствии с которым последовательность графических образов кодируется после- 
довательностью бит. Сейчас в мире несколько десятков широко используемых 
кодеков. Какой же выбрать? Суровая реальность НТМТ.5 такова, что разработчики 
браузеров не сумели договориться о едином общепринятом видеокодеке. Впрочем, 
количество альтернатив немногим больше: две. Один из этих кодеков платный 
(лицензионный сбор), но работает в Ѕаѓагі и на іРћопе (а также в АдоБе Е1аѕћ, если 
пользоваться разработками типа «Видео для каждого»). Другой — бесплатный, он 
работает в браузерах с открытым исходным кодом, таких как Сһготішт и Мо7Ша 
Еігеѓох. 

Протестировать поддержку разных форматов видео можно способом З (см. раз- 
дел «Способы тестирования браузера» этой главы). Если в браузере поддерживается 
НТМІ5-видео, то для ООМ-объекта, соответствующего тегу <үіїео>, будет определен 
метод сапР1ауТуре(), который и сообщит, с какими форматами видео может работать 
браузер. 

Рассмотрим функцию, проверяющую браузер на умение читать патентованный 
формат Масіпѓоѕћ и іРһопе: 


Ғипсёіоп ѕиррогіѕ 264 раѕе1іпе үуійео() { 
ЇР (1ѕиррогіѕ уідео()) { геёиги Ға1ѕе; } 
уаг у = адоситепі . сгеаеЕТетепї ("у14ео"); 
гефигп у.сапРТауТуре( 'у14ео/тр4; содесз="аус1.42Е01Е, тр4а.40.2"'); 


} 


В первой строке этого кода с помощью созданной ранее функции ѕиррогіѕ уійео() 
мы проверяем, есть ли в браузере поддержка НТМТ.5-видео: 


17 (!5иррогё$ уідео()) { гефиги Ға1ѕе; } 


Если браузер не поддерживает НТМТ.5-видео, то и разные форматы он, конеч- 
но, не будет читать. 

Теперь создадим пустой тег <\14е0> (но не будем присоединять его к странице, 
чтобы он не был виден) и вызовем метод сапР1ауТуре(). Этот метод наверняка будет 
доступен, ведь в его существовании только что удостоверилась функция $иррог{$ _ 
үідео(). 


уаг у = аоситепі . сгеаіеЕТетепі ("уіаео") ; 
гефиги у.сапРТауТуре( ‘у1аео/тр4; сойесѕ=”аус1.42Е01Е, шр4а.40.2”’); 


Формат видеоданных — это, вообще говоря, сочетание нескольких компонентов. 
Если говорить технически, показанный выше код спрашивает у браузера, может 
ли тот воспроизводить видео Н.264 базового профиля и звук ААС профиля низкой 
сложности в контейнере МРЕС-4!. 

Функция сапРТауТуре() не возвращает булевы значения Ёгие и ѓа1ѕе. Зная, что 
некоторые видеоформаты очень сложны, функция отвечает одним из трех значе- 
ний: 


' Что все это значит, я объясню в главе 5. Возможно, вам не помешает также ознакомить- 


ся с «Элементарным введением в кодировки видеоданных» (В р://Фуейюотагк.отв/ 
(а5/этуе). — Примеч. авт. 
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"ргора Ту" — браузер уверен, что может проигрывать видео данного формата; 
"тауре" — браузер считает, что, возможно, сумел бы воспроизвести видео дан- 
ного формата; 


оо 


О "" (пустая строка) — браузер полагает, что наверняка не может воспроизвести 
такое видео. 


Для проверки браузера на умение читать открытый формат, используемый 
в Мох Ша Еігеѓох и иных браузерах с открытым кодом, есть другая функция. Она 
сконструирована точно так же. Разница лишь в том, что функции сапР1аутТуре() 
передается не такая строка, как в примере выше. На этот раз мы спрашиваем 
у браузера, может ли тот воспроизводить видео формата Тћеога и аудио форма- 
та УогБіѕ в О55-контейнере: 


Ғипсёіоп ѕиррогіѕ 099 Еһеога үійео() { 
1Ғ (!1ѕиррогїѕ уідео()) { гефигп Та1зе; } 
уаг у = аоситепЕ.сгеаёеЕ1етеп("уійео" ) ; 
гегирп у.сапРТауТуре( ‘уійео/099; сойесѕ=”Еһеога, могЬ1$””); 


} 


Есть еще третья альтернатива — \/еБМ (вЕр://мимм ммебтрго]еск.ога), не за- 
щищенный патентом видеокодек, код которого недавно был открыт. Его наме- 
реваются включить в последующие версии популярных браузеров, в частности 
Сһготе, Еігеѓох и Орега. Тестирование поддержки \!е М-видео проводится по 
той же схеме: 


Ғипсїіоп ѕиррогѕ мерт у14ео() { 
1Ғ (!ѕиррогїѕ уідео()) { гефигп Та1зе; } 
уаг у = аоситепЕ .сгеаёеЕ1етеп("уійео" ) ; 
гебиги у.сапРТауТуре(‘у14ео/мебт; софес$=”ур8, могЬ15””); 


} 


Чтобы не писать собственную функцию, можете прибегнуть к помощи Мойегпіхг 
(но имейте в виду, что тестировать поддержку открытого видеоформата №еБМ эта 
библиотека пока не умеет): 


1Е (Моаегпі2г.уіаео) { 
// воспроизведем ролик, но вот в каком формате? 
ЇР? (Модеги12г.\14ео.099) { 
// попробуем 099 Тпеога + \огб1$ в 099-контейнере 
} е1ѕе 1? (Моаеги12г. 1 4ео. 1264) { 
// попробуем видео Н.264 + аудио ААС в МР4-контейнере 
} 
} 


Локальное хранилище 


Локальное хранилище НТМТ.5 (Нёр://Чеум/З.ога/пит 5 меб зюгаде/) дает способ хранить 
часть сайтовых данных в памяти вашего компьютера, чтобы ПОТОМ было удобнее их 
загружать. На схожей идее основана система соокКіеѕ, но мы говорим о значительных 
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объемах информации. СооКіеѕ имеют ограниченный размер, и каждый раз при загруз- 
ке очередной страницы ваш браузер отсылает их веб-серверу, а это лишний расход 
времени и трафика. Локальное хранилище НТМТ. устроено так, что при загрузке 
сайтовой страницы недостающие данные могут быть получены из памяти вашего ком- 
пьютера с помощью ЈауаЅсгірі. 


РАЗМЕТКА В ВОПРОСАХ И ОТВЕТАХ 


Вопрос: Локальное хранилище — это действительно 
часть НТМІ5? И почему ему посвящена особая спец- 
ификация? 


Ответ: Если кратко, то да: локальное хранилище — 
часть НТМІ5. Чуть более подробный ответ таков: 


раздел в основной спецификации НТМІ5, но потом 
некоторые участники рабочей группы НТМЕ5 пожа- 
ловались на чрезмерно возросший объем стандарта, 
и спецификацию хранилища выделили в особый до- 
кумент. Поступать так, конечно, ничуть не разумнее, 
чем разрезать торт на кусочки, чтобы уменьшить 


исторически локальному хранилищу был посвящен общее количество калорий в нем. 


Протестировать поддержку локального хранилища НТМТ.5 можно спосо- 
бом 1 (см. раздел «Способы тестирования браузера» этой главы). Если НТМТ.5- 
хранилище поддерживается браузером, то для глобального объекта м1идом будет 
определено свойство 1Тоса15{огаде. Соответственно, если поддержки хранилища 
в браузере нет, то свойство тоже не будет определено. Проверить поможет такая 
функция: 


Типсїіоп зиррогё$_Тоса1_$фогаде() { 
гебиги (‘Тоса15$огаде’ іп м1пдом) 8& міпаомГ· Тоса15$огаде’] !== пи11; 


} 


Чтобы не писать собственную функцию, прибегните к помощи Мо4егиияг: 


ЇР? (Модеги12г.Тоса1 $фогаде) { 
// хранилище доступно! 

} е1ѕе { 
// встроенной поддержки хранилища нет, 
// стоит попробовать беаг$ или иное стороннее решение 


Помните, что Јауа$Ѕсгіре чувствителен к регистру. Атрибут объекта Мойегпіхг 
называется 1оса1ѕіогаде (все буквы строчные), а ООМ-свойство — міпаом. 1оса15Еогаде 
(буква $ прописная). 


РАЗМЕТКА В ВОПРОСАХ И ОТВЕТАХ 


Вопрос: Насколько хорошо защищены данные моего 
локального хранилища НТМ/5? Может ли кто-нибудь 
ихчитать? 


зический доступ к вашему компьютеру. Через браузер 
клокальному хранилищу могут обращаться все сайты, 
но каждому из них разрешено читать и видоизменять 
только «свои» данные, а не информацию, сохранен- 
ную другими сайтами. Это так называемое «ограниче- 
ние по источнику» (ћ1р://6їсу/9ҮуРрј). 


Ответ: Читать данные вашего локального хранилища 
и даже видоизменять их могут все лица, имеющие фи- 
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Фоновые вычисления 


Фоновые вычисления (Һір://6ієу/9јһео?) — введенный в НТМТ.5 стандартный спо- 
соб запуска Јауа$сгірё в браузере в фоновом режиме. Механизм фоновых вычис- 
лений позволяет иметь несколько «процессов», процедуры которых выполняются 
более или менее одновременно (чтобы понять, как это происходит, подумайте об 
одновременной работе большого количества приложений в вашем компьютере). 
Эти фоновые «потоки» могут выполнять сложные математические расчеты, за- 
прашивать о чем-либо сеть или локальное хранилище, в то время как отображаемая 
в браузере страница будет реагировать на действия пользователя: щелчки кнопкой 
мыши, прокрутку, клавиатурный ввод. 

Протестировать поддержку фоновых вычислений можно способом 1 (см. раз- 
дел «Способы тестирования браузера» этой главы). Если в вашем браузере под- 
держивается соответствующий интерфейс (ҰеЬ У/огКег АРТ), то для глобального 
объекта міпіом будет определено свойство МогКег. Соответственно, если поддержки 
АРІ фоновых вычислений в браузере нет, то свойство тоже не будет определено. 
Проверить поможет такая функция: 


Ғипсїіоп ѕиррогѕ мер могкегѕ() { 
гебигп !1!м7пдом. могКег; 


} 


Чтобы не писать собственную функцию, прибегните к помощи Модеттитг (см. раз- 
дел «Модегтииг: библиотека для тестирования НТМТ.5-функций» этой главы): 


1? (Модегилтг .меБмогКег$) { 
// фоновые вычисления доступны! 
} ее { 
// встроенной поддержки фоновых вычислений нет, 
// стоит попробовать беаг$ или иное стороннее решение 


} 


Помните, что ]ауаЗст!ре чувствителен к регистру. Атрибут объекта МоЯегпіхг 
называется мебмогКег$ (все буквы строчные), а ПОМ -объект — м1паом. МогКег (буква 
УУ прописная). 


Офлайновые веб-приложения 


Читать статические веб-страницы, отключившись от Сети, очень просто: достаточ- 
но зайти в Интернет, загрузить страницу, потом выйти из Интернета, уехать с но- 
утбуком к себе на дачу и там в тишине наслаждаться чтением. (Шутка. На дачу 
можно не ехать.) С офлайновым режимом у таких веб-приложений, как Стаі 
и Соое Юосѕ, дело обстояло сложнее. Но теперь благодаря возможностям НТМТ.5 
создать веб-приложение, работающее в режиме офлайн, может каждый из нас, а не 
только компания Сооё/е. 

Такое приложение берет начало в онлайне. При первом посещении сайта, кото- 
рый может отображаться локально, веб-сервер сообщит вашему браузеру, какие 


34 Глава 2. Тестирование функций НТМЕ5 в браузере 


файлы надо загрузить, чтобы сайт работал без подключения к Сети. Это могут быть 
абсолютно любые файлы: НТМТ, ЈауаЅсгірё, картинки и даже видеоролики (см. раз- 
дел «Видео» этой главы). После того как браузер загрузит все необходимые файлы, 
вы сможете открывать тот же сайт, отключившись от Интернета: браузер, видя, что 
сетевое подключение недоступно, будет пользоваться предварительно загружен- 
ными файлами. Перейдя в режим онлайн, вы сумеете передать на сервер изменен- 
ные вами данные. 

Протестировать поддержку офлайновых приложений можно способом 1 (см. раз- 
дел «Способы тестирования браузера» этой главы). Если ваш браузер поддер- 
живает их, то для глобального объекта м1пдом будет определено свойство арр1іса- 
ёїопСаспе. Соответственно, если поддержки офлайновых приложений в браузере 
нет, то свойство тоже не будет определено. Проверить это поможет такая функ- 
ЦИЯ: 


#ипсёіоп ѕиррогіѕ о##1іпе() { 
гебиги ! міпаом.арр1ісатіопСасће; 


} 


Чтобы не писать собственную функцию, прибегните к помощи Мойегпіхг: 


ЇР? (Модеги12г.арр11са%1опсаспе) { 
// офлайновые приложения доступны! 
} е1ѕе { 
// встроенной поддержки офлайновых приложений нет, 
// стоит попробовать беаг$ или иное стороннее решение 


} 


Помните, что ЈауаЅсгірї чувствителен к регистру. Атрибут объекта Мойегпіхг 
называется арр11са{1опсасйе (все буквы строчные), а ПОМ-объект — м1идом. 
арр11саф1опСаспе (буква С прописная). 


Геолокация 


Геолокация — это вид деятельности, позволяющий определять координаты своего 
местонахождения вмире и при желании делиться ими с друзьями. Координаты мож- 
но определить несколькими способами: по ТР-адресу, через подключение к беспро- 
водному Интернету, через ретранслятор сотовой сети, на связи с которым находится 
ваш телефон, или с помощью особого СР$-аппарата, принимающего спутниковые 
данные о широте и долготе. 


РАЗМЕТКА В ВОПРОСАХ И ОТВЕТАХ 


Вопрос: Разве геолокация — это часть НТМІ5? Почему стандарт геолокации определяет самостоятельная рабо- 


о ней идет речь в этой книге? чая группа (Нир:/Аллл\м.м3.0т9/2008/деоосавоп/), никак 
не связанная с рабочей группой НТМГ. Но на страницах 
Ответ: Разработчики браузеров работают над поддерж- нашей книги упоминание о геолокации неизбежно: это 


кой геолокации буквально в эти самые дни. Строго говоря, один из векторов развития современного Интернета. 
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Протестировать поддержку геолокации можно способом 1 (см. раздел «Способы 
тестирования браузера» этой главы). Если ваш браузер поддерживает АРІ геолока- 
ции, то для глобального объекта пауідаіог будет определено свойство део1осаїіоп. 
Соответственно, если поддержки геолокации в браузере нет, то свойство тоже не 
будет определено. Проверить поможет следующая функция: 


ТипсёТоп ѕиррогїѕ део1осаїіоп() { 
гебиги !!паутдафог.деоТоса® Топ; 


} 


Чтобы не писать собственную функцию, прибегните к помощи Модегтитг (см. раз- 
дел «Моаегтилг: библиотека для тестирования НТМТ.5-функций» данной главы): 


1Р (Модеги12г. деоТоса1оп) { 
// определим ваши координаты! 
} ее { 
// встроенной поддержки геолокации нет, 
// стоит попробовать беаг$ или иное стороннее решение 


} 


Если «родная» поддержка АРТ геолокации в вашем браузере отсутствует, не 
надо отчаиваться. Сеагѕ (Һр://001ѕ.доодіе.сот/деагѕ/) — разработанное Сооёе 
браузерное расширение с открытым исходным кодом, функционирующее на плат- 
формах У/тао\з, Мас, Глпих, \/ш4о\из Мое и Апаго14, — эмулирует в старых 
браузерах отдельные новые функции, о которых рассказано в этой главе. В част- 
ности, Сеагѕ предлагает АРІ геолокации. Этот интерфейс отличается от стандарт- 
ного пауідаіог.деоТосаїтоп, но служит тем же целям. 

Собственные АРІ геолокации есть также на некоторых мобильных платформах, 
в том числе ВасКВеггу, Моча, Раш и ОМТР ВОМПТ. Как пользоваться всеми этими 
столь несхожими прикладными интерфейсами, будет подробно рассказано в главе 6. 


Типы полей ввода 


Вы знаете о веб-формах все, не так ли? Действительно, чего там сложного: создать 
контейнер <Ғогт>, добавить несколько полей <іприї фуре="{ех{">, возможно, одно 
<1приё фуре="ра$$мога"> и увенчать конструкцию великолепной кнопкой <іприї 
Туре=" ѕиртії">. 

Увы, это лишь незначительная часть всех современных функций. В НТМТ5 
появилось больше десятка новых типов полей ввода, которые теперь можно ис- 
пользовать в формах. 


О <1приё ёуре="ѕеагсһ"> — поисковая форма (Һір://6іё.Іу/9тОї5С). 
О <іп 
О <іп 


риё фуре="питьег"> — форма выбора числа (Һр://6і.1у/аР2Нјр). 
р 
<іприё фуре="со1ог"> — форма выбора цвета (Һіёр://Ьіє.Іу/бмВсмоО). 
р 
р 


иё уре="гапде"> — ползунок (Һ&р://ЫієІу/атиАг). 


«ій 


иё ћуре="+е1"> — телефонный номер (Һр://ЬієІу/атк\1а). 


ооо 


ие їуре="иг1"> — интернет-адрес (Һр://Ыіу/сјКЫЗа). 
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<1приф фуре="ета11"> — адрес электронной почты (Вр://ЬКу/ааОгд5). 
<1приф фуре="дафе"> — форма выбора даты (Һ&р://Ьі.Іу/с8һ58). 

и ћуре="топіһ"> — месяц (НЁр://Ыу/сБанНВУ). 

и фуре="меек"> — неделя (Һќр://ЫієІу/6А3г58). 

иё їуре="їіте"> — метка времени (Ћр://6їёІу/ЬҒМСМп). 


оооооо 
^ 


<іприї ъуре="даёеёіте"> — точные дата и время в абсолютном исчислении (И&р:// 
Ыі. 1у/с462\%\/). 


О <іприё фуре="дафе 1те-1оса1"> — местные дата и время (Һ&р://ЫіЄ.Іу/а2іМКЕ). 


9: >85 


Протестировать поддержку новых типов полей ввода можно способом 4 (см. раз- 
дел «Способы тестирования браузера» этой главы). Сначала создадим в памяти 
пустой тег <іприї>: 


уаг 1 = аоситепЕ .сгеаёеЕТетепі("іприё" ); 


По умолчанию каждое поле ввода имеет тип "їехї"; впоследствии это окажется 
очень важным. 

Теперь присвоим атрибуту іуре пустого тега <іприї> значение, соответствующее 
типу, поддержку которого мы тестируем, например: 


1. 5 А Нг1Ьще( "буре", "соТог"); 


Если ваш браузер умеет работать с данным типом полей ввода, то в атрибуте 
уре будет и далее сохраняться установленное вами значение. Если нет, то новое 
значение будет проигнорировано и при запросе система возвратит "фех{": 


гефиги 1.буре !== "ехї"; 


Чтобы не писать самостоятельно 13 разных функций, которые бы тестировали 
поддержку НТМТ.5-типов полей ввода, можно, как и в остальных случаях, вос- 
пользоваться Мойегпіхг. В целях эффективности при тестировании всех 13 новых 
типов Мойегпіхг обходится всего одним тегом <іприї>. На выходе получаем хеш 
Модеги1 тг. 1прифурез с 13 ключами (НТМТ.5-типы полей ввода) и 13 булевыми зна- 
чениями (есть поддержка — їгие, нет поддержки — Ға1$е): 


1? (!Модеги1тг.1прифурез .дафе) { 
// встроенной поддержки <1приё фуре="дафе"> нет, 
// можно попробовать решить проблему с помощью Војо или ЗОчегуиТ 


} 


Подсказывающий текст 


Кроме новых типов полей ввода, НТМІ5 предусматривает несколько мелких до- 
полнений к существующей системе веб-форм. Одно из них предполагает возмож- 
ность назначать для всех полей ввода «подсказывающий» текст, который отобра- 
жается внутри поля до тех пор, пока оно пусто и не несет фокуса. Как только 
пользователь щелкнет на нем или перейдет к нему с помощью табулятора, под- 
сказывающий текст исчезнет. Если по этому описанию вам трудно представить, 
о чем идет речь, см. рис. 9.1. 
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Протестировать поддержку подсказывающего текста можно способом 2 (см. раз- 
дел «Способы тестирования браузера» этой главы). Если ваш браузер поддержива- 
ет его, то для ООМ-объекта, представляющего тег <іприї>, будет определено свой- 
ство р1асеһо1дег (даже когда в НТМГ-коде ему не присвоено никакое значение). 
Если нет, то свойство не будет определено. Проверить поможет такая функция: 


Ғипсёїоп ѕиррогіѕ іприї рТасеһоТ1аег() { 
уаг 1 = аоситепё . сгеатеЕТетепї ( ' їприї'); 
гебиги ‘рТасећо1дег’ іп 1; 


} 


Чтобы не писать собственную функцию, прибегните к помощи Модегтитг (см. раз- 
дел «Мойегпіг: библиотека для тестирования НТМТ.5-функций» данной главы): 


1Е (Модегпіхг. іприє.р1асепо1ег) { 
// подсказывающий текст будет виден! 

} ее { 
// подсказывающий текст не поддерживается, 
// вернемся к нашим сценариям 


} 


Автофокусировка в формах 


На многих сайтах с помощью ]ауазст!рЕ реализована автоматическая фокусировка 
первого из полей веб-формы. Так, на главной странице Соодіе.сот форма поиска 
несет фокус, так что запрос можно вводить сразу, не помещая курсор в поле. Это 
удобно для большинства посетителей, но может мешать «продвинутым» пользо- 
вателям и людям с особыми потребностями. Если на такой странице нажать Пробел, 
то прокрутка на один экран вниз не сработает, как можно ожидать; вместо этого 
в поле ввода появится пробел. Другой пример: если переместить фокус в другое из 
полей формы, пока страница еще грузится, «услужливая» система вернет курсор 
обратно, в начальное поле. Это сбивает с ритма, к тому же пользовательский ввод 
попадает не туда, куда следует. 

Все эти специальные случаи трудно учесть при автофокусировке с помощью 
Јаха$сгірі. Еще недавно пользователей, которых раздражает «кража» фокуса веб- 
страницами, ничем нельзя было утешить. 

Для решения проблемы в НТМІ5 введен атрибут аифоТосиз, который может быть 
применен к любому элементу веб-формы. Этот атрибут работает в полном соответ- 
ствии с названием, то есть перемещает курсор в одно из полей ввода на форме. Но это 
не сценарное решение, а НТМТ-код, значит, его поведение на всех сайтах будет оди- 
наково. Со своей стороны, разработчики браузеров и браузерных расширений, воз- 
можно, предложат пользователям функцию отключения автофокусировки. 

Протестировать поддержку автофокусировки можно способом 2 (см. раздел «Спо- 
собы тестирования браузера» этой главы). Если ваш браузер поддерживает автофо- 
кусировку, то для ООМ-объекта, представляющего тег <іприї>, будет определено 
свойство аифоТоси$ (даже когда в НТМТ-коде оно не активизируется). Если нет, то 
свойство не будет определено. Проверить поможет такая функция: 
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Ғипсёіоп ѕиррогіѕ іприї аифофоси$() { 
уаг 1 = доситепі . сгеаёеЕТетепЕ( ' іприё'); 
геёигп ‘аисоҒосиѕ’ іп 1; 


} 


Чтобы не писать собственную функцию, прибегните к помощи Мойегпіхг 
(см. раздел «Мо4егтият: библиотека для тестирования НТМТ.5-функций» этой 
главы): 


і? (Модегпіхг. іпри. аџиёоғосиѕ) { 
// автофокусировка работает! 

} ее { 
// автофокусировка не работает, 
// вернемся к нашим сценариям 


} 


Микроданные 


Микроданные (НЁр://5&.1у/сК9В}) — это стандартизованный способ расширения се- 
мантики ваших веб-страниц. Так, например, с помощью микроданных можно указать, 
что та или иная фотография доступна на условиях определенной лицензии Стеайуе 
Соттоп. Как вы увидите в главе 10, при верстке страницы с личной информацией 
тоже можно с успехом пользоваться микроданными. Браузеры, браузерные расши- 
рения и поисковые системы умеют преобразовывать НТМТ.5-микроданные в формат 
уСага — стандарт обмена контактной информацией. Кроме всего названного, можно 
определять пользовательские словари микроданных. 

Стандарт микроданных НТМТ.5 включает в себя элементы разметки НТМІ. 
(главным образом для поисковиков) и набор ООМ-функций (главным образом 
для браузеров). Вашим веб-страницам не повредит разметка микроданных, ведь 
в каждом отдельном документе она состоит не более чем из нескольких уместно 
вписанных атрибутов. Поисковые системы, которые не умеют работать с микро- 
данными, будут эти атрибуты просто игнорировать. Если же вы хотите опериро- 
вать микроданными посредством РОМ, то нужно проверить, работает ли в брау- 
зере РОМ АР! микроданных. 

Протестировать поддержку АРГНТМТ5-микроданных можно способом 1 (см. раз- 
дел «Способы тестирования браузера» этой главы). Если ваш браузер поддерживает 
этот АРІ, то для глобального объекта м1пдом будет определена функция деї1#етѕ (). 
Соответственно, если поддержки микроданных в браузере нет, то функция тоже не 
будет определена. Проверить можно так: 


Ғипсііоп ѕиррогїѕ тісгодаа арі() { 
геёигп ! !аоситепі. дебет ; 


} 


Вероятно, пока вы читали эту главу, вам успели надоесть однообразные ссылки 
на Моегпіхг. Тогда вы будете рады узнать, что Мойегпіхг пока не умеет тестировать 
поддержку АРІ микроданных, и в этом случае вам придется-таки написать про- 
верку самостоятельно. 
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Для дальнейшего изучения 


Спецификации и стандарты: 


ооооооооо 


е 


о 


тег <сапуаѕ> (Һ&р://ЬіЄ1у/9ЈН20Р); 

тег <уійео> (Һр://Ь.Іу/аЗкріа); 

типы полей ввода (Һ&р://ЬієІу/акмен4); 

атрибут <іприё р1асеһо1ег> (Һр://Ыі.Іу/саСі8№); 

атрибут <1приё аифоТосиз> (ћр://6і.1у/а610ј4); 

локальное хранилище НТМІ5 (В&р://деу м3 .ога/Н 5 меб $огаде/); 

фоновые вычисления (Һр://6і.1у/9јһеоғ); 

офлайновые веб-приложения (Һр://6ї&.1у/18792Х); 

АРІ геолокации (Һ&р://мму.м3.огд/ТА/деоіосаїоп-АРІ/). 

Јаха$сгірі-библиотеки: 

Мойегпіхг (Һр://илмуу.тодегпігг.соту/) — библиотека для тестирования НТМТ.5- 
функций; 

вео.јѕ (Һір://сойе.доодіе.сот/р/део-Іосайоп-јауаѕсгір/) — обертка для АРІ геоло- 
кации. 


Другие статьи и материалы: 

Уіаео юг ЕуегуБоду! (Һр://сатепаеѕідп.сот/сойе/міаео_ѓог_еуегубоау); 
«Элементарное введение в кодировки видеоданных» (ћір://імеіпіотагк.ого/ 
{ад/9ме); 

«Свойства разных типов видео» (Һ&р://\мікі.луһабмо.ого/\ікі/Міаео уре рагатеїегѕ); 


приложение к этой книге. 


Что все 
это значит? 


Приступим 


В этой главе мы возьмем совершенно корректную веб-страницу в разметке НТМТ. 
и... улучшим ее. Исходный код одних ее частей станет чуть короче, других — чуть 
длиннее, но главное, что вся страница придет в соответствие с идеей семантической 
сети. Вот увидите, какое это волшебное превращение. 

Предметом наших опытов станет страница Ир: //Аметюйит5.огд/ехатр!ез/Ыод- 
огідіпаі.ћїті. Вам суждено не просто изучить ее, а и буквально «сжиться» с ней, по- 
жалуй, даже полюбить ее. Это все еще впереди. А пока заглянем в исходный код 
страницы. 


Определение типа документа 


Итак, начнем с самого начала: 


<!БОСТУРЕ һіт] 
РИВЕТС "-//МЗС//ОТО ХНТМЕ 1.0 ЅігісЕ//ЕМ№" 
"Пер: / /ммм . м3 .ога/ТКИхХИ т 1 /ОТО/ хит 1-5 гісі. аба"> 


В этих строках задано так называемое определение типа документа (ОТД). 
История возникновения ОТД долгая и довольно мрачная. При разработке брау- 
зера Пуегпес Ехр|огег 5 под операционную систему компьютеров Масіпѓоѕћ ком- 
пания М1сгозоЁ столкнулась с неожиданной проблемой. В новой версии браузера 
было столько улучшений по части стандартов, что старые страницы отображались 
в нем неправильно. Вернее, отображались они правильно (в соответствии со спе- 
цификацией), но пользователь думал, что неправильно. Эти страницы были свер- 
станы с оглядкой на странности работы популярных браузеров того времени 
(2000), главным образом М№еїѕсаре 4 и Іһїегпеё ЕхрІогег 4. Интернет оказался не 
готов к той степени совершенства, которую демонстрировал ІЕ5/Мас. 

Тогда специалисты М1сгозой предложили нетривиальный выход. Перед про- 
рисовкой страницы ІЕ5/Мас пытался найти в ее исходном тексте «тип документа», 
который, как правило, указывают в самых первых строках, выше открывающего 
тега <и >. Старые страницы, отображение которых надо было согласовать с при- 
чудами старых браузеров, обычно вообще не содержали ОТД. Эти страницы брау- 
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зер ІЕ5/Мас прорисовывал в точности так же, как и его предшественники. Чтобы 
включить более полную поддержку стандартов, верстальщик должен был вписать 
перед тегом <ћіт1> то или иное ОТД. 

Этот механизм быстро приобрел популярность. Вскоре во всех основных браузерах 
было два режима: режим совместимости (дийК$ то4е) и стандартный (ѕќапаагаѕ 
шо4е). Но затем положение снова вышло из-под контроля, как это всегда бывает 
в Сети. При тестировании браузера Мо7Ша версии 1.1 было обнаружено, что в режиме, 
называемом стандартным, некоторые страницы отображаются не в соответствии со 
спецификацией. Их прорисовка полагалась на один определенный «каприз» браузе- 
ров, и когда графический движок Мо7Ша после обновления перестал капризничать, 
внешний вид тысяч страниц был нарушен. Так возник «почти стандартный» режим 
(аігпоѕї ѕсапдагаѕ то4е) — это название, как ни странно, общепринятое. 

В основополагающей работе Генри Сивонена (Непт! Ѕіуопеп) «ОТД и пере- 
ключение режимов браузера» (Һір://һѕіуопеп.ікі.й/аосіуре/) о разных режимах гово- 
рится следующее. 

Режим совместимости 

При работе в этом режиме браузер отступает от современных спецификаций, что- 
бы не нарушать внешний вид страниц, сверстанных по канонам конца 1990-х годов. 

Стандартный режим 

Работая в этом режиме, браузер пытается отобразить страницу в соответствии 
со спецификацией данного типа документов (и, конечно, в меру того, насколько 
хорошо реализованы в программе нужные для этого алгоритмы). В НТМТ.5 стан- 
дартный режим называется режимом несовместимости (по диігкѕ то4е). 

Почти стандартный режим 

Браузеры ЕігеЃох, Ѕаѓагі, Соое Сһготе, Орега (начиная с версии 7.5) и ІЕ8 
также располагают «почти стандартным» режимом, в котором программы опреде- 
ляют высоту ячеек в таблицах не строго по спецификации С$52, а традиционным 
образом. В НТМТ. это называется режимом частичной совместимости (Пике 
аиик$ тойе). 


# а 
= — ПРИМЕЧАНИЕ 
Ч Это очень упрощенный пересказ. Чтобы по-настоящему войти в курс дела, надо прочесть 


«а. 

3‘ статью Сивонена целиком. Ведь на самом деле даже в 1Е5/Мас было предусмотрено, что не- 
` которые (уже тогда устаревшие) ОТД не включали полную поддержку стандартов. Со вре- 
менем расширялись как список известных «странностей», так и список разных ОТД, которые 
включают режим совместимости. В последний раз, когда я занимался подсчетами, было пять 
определений типа документа, переключающих браузер в «почти стандартный» режим, и еще 73, 
переводящих его в режим «со странностями». Вполне возможно, что какие-то из типов я не 
учел. О четырех (четырех!) режимах прорисовки страниц в ТЕЗ вообще писать не буду. Как 
происходит переключение между ними, можно видеть на диаграмме: ћ&р://һѕімопеп.ікі.Я/ 
аосіуре/іе8-тоае.рпд. О таких механизмах скажу только одно: их нужно уничтожать. 


На чем мы остановились? Да, точно, на типе документа: 


<1рОСТҮРЕ И 
РОВЕТС "-//мЗС//ОТО ХНТМЕ 1.0 ЅЕгісЕ/ /ЕМ" 
"ПЕер : / Им . м3. ога/ТКИХИ т 1/ОТО/ хит 1 - Егіс. 964"> 
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Это один из 15 типов, которые во всех современных браузерах включают стан- 
дартный режим. Такая запись корректна. Ее можно оставить, если угодно, а можно 
заменить определением в стиле НТМТ.. Оно более короткое и тоже включает стан- 
дартный режим во всех современных браузерах. 

Вот это ОТД: 


<1рОСТҮРЕ ћЕт1> 


Как видите, всего 15 символов. Их можно не копировать, а просто напечатать — 
и при этом не ошибиться. 


СЕКРЕТЫ РАЗМЕТКИ 


Определение типа документа нужно обязательно по- Ошибку такого рода очень трудно отследить. В НТМЕ 
мещать в самом начале НТМЕ-файла. Если перед ОТД лишние пробелы и пустые строки обычно не играют 
находится что-либо еще, например одна-единственная большой роли, и глаз верстальщика не замечает их. 
пустая строка, не исключено, что некоторые браузе- Но в данном случае убедиться в их отсутствии очень 
ры будут рассматривать страницу как лишенную ОТД, важно! 

а значит, отображать ее в режиме совместимости. 


Корневой элемент 


НТМГ-страница представляет собой последовательность элементов (контейне- 
ров), вложенных друг в друга. По своей структуре страница схожа с деревом. В ее 
исходном тексте можно найти сестринские элементы, сравнимые с двумя ветвями, 
которые отходят отединого ствола, а также дочерние элементы других элементов — 
маленькие ответвления больших ветвей (и наоборот: для элементов, непосред- 
ственно вложенных в него, контейнер является родительским элементом, а дляеще 
более мелкого вложенного содержимого — просто предком). Элементы, не содер- 
жащие дочерних, — это «листья» дерева, а самый внешний, то есть общий предок 
всех элементов на странице, называется корневым. Корневой элемент НТМІ- 
страницы — это всегда НТМЕ (тег <И >). 

Корневой элемент страницы, с которой мы экспериментируем (Һ&р://аімеіпёоһеті5. 
огд/ехатріеѕ/Ыод-огідіпа!.һт!), выглядит следующим образом: 


<Ит1 хи и$=" Ир: / Лам. м3. 079/1999/хһЕт1" 
Тапо="еп" 
хт] :1апд="еп"> 


В такой разметке опять же нет ничего ошибочного. Ее можно оставить как есть, 
потому что это валидный НТМТ.5. Но стандарт НТМТ.5 сделал ненужной часть 
информации, содержащейся в этом заголовке; за счет ее удаления можно сэконо- 
мить несколько байт. 

Обсудим, во-первых, атрибут хт1пѕ — отголосок стандарта ХНТМІ. 1.0. Он объ- 
являет, что элементы страницы принадлежат пространству имен ХНТМГ, описа- 
ние которого находится по адресу Һ&р://муу.м3.0г9/1999/хһті. Но к данному про- 
странству имен относятся все элементы НТМТ.5; теперь уже нет нужды объявлять 


Элемент НЕАБ 43 


это в явном виде. Вне зависимости от наличия или отсутствия атрибута хт1пѕ стра- 
ница, сверстанная на НТМІ5, будет одинаково показана всеми современными 
браузерами. 

После удаления хт1пѕ корневой элемент выглядит так: 


<һіті Тапо="еп" хи: Тапд="еп"> 


Осталось два атрибута, Тапд и хт] : Тапд. Оба указывают на язык содержания дан- 
ной НТМТ-страницы". Зачем же указывать два атрибута с одинаковым смыслом? 
Это снова наследие ХНТМІ. В НТМТ. действует только атрибут 1апо, и если вы 
решите оставить наряду с ним хт] : Тапд, то следует убедиться, что в обоих назван 
один и тот же код языка. 


Для упрощения перехода на стандарт ХНТМЕ (и с него на более новые) в НТМЕ-элементы ино- 
гда вводят атрибут с литералом, состоящим только из локального имени "хт!і:Іапд", без ука- 
зания пространства имен и без префикса. Уместно пользоваться такой записью лишь в том 
случае, если хті:Іапо сопровождается атрибутом Іапо, тоже без ссылки на пространство имен 
и стем же значением (сверка происходит в кодировке АЅСІІ без внимания к регистру букв). 
Сам по себе атрибут с локальным именем "хті:Іапд" без пространства имен и без префикса 
никак не влияет на работу с содержимым страницы. 


Готовы отказаться от ненужного? Итак, было... и не стало! Корневой элемент 
страницы теперь выглядит совсем просто: 


<һіт1 Тапод="еп"> 


Больше никаких указаний здесь не требуется. 


Элемент НЕАО 


Первым дочерним тегом контейнера <һт1> обычно является <һеаф>. Внутри <ћеаа> 
содержатся метаданные — это сведения о странице, а не ее собственное содержи- 
мое, «тело» (которое, естественно, заключено в контейнер <Боду>). Сам тег <ћеад> 
при переходе к НТМТ.5 не изменился каким-либо заметным образом, чего, однако, 
нельзя сказать о его содержимом. Вернемся к коду страницы-образца: 


<ћеаа> 
<теба һЕЕр-едиіу="Сопёепі- Туре" сопепі="Бехі/һЕті; сһагѕеё=ит?-8" /> 
<1Е1е>Му Мер1од</1 1е> 
<11пк ге]=" $фу1езйееф" ұуре="бехі/с55" һге?="5уТе-огідіпа1.сѕ5" /> 
<11пк ге1="а1ёегпате" ёуре="арр1ісаїтоп/аёот+хт1" 
{1 е="Му МерТод Ғееа" 
пге?=" /Ғееа/" /> 
<11іпк ге1="ѕеагсћ" Ұуре="арр11ісаёіоп/орепѕеагсһаеѕсгірілоп+хт]" 
$161е="Му Мер1од зеагсй" 
һгеғ="орепѕеагсһ. хт1" /> 


' Буквами еп обозначается английский язык (Епе1іѕћ). Русский язык обозначался бы ги. 


Более подробно о кодах языков написано на сайте Һер: / /ууү.уЗ.оге/Табегпабіопа[/ 
апеѕііопѕ /да-сһооѕіпе-Јапсџасе-аз. 
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<1іпк ге]=" зпогёсие ісоп" һгеғ=" /Ғауісоп.ісо" /> 
</һеад> 


Начнем с рассмотрения тега <пеїа>. 


Кодировка символов 


Непрофессионал, говоря о «тексте» веб-страниц, обычно имеет в виду символы 
и знаки, которые можно видеть на экране компьютера. Но машина оперирует не 
символами и знаками, а битами и байтами. Любой текст, который вы когда-либо 
видели на экране, память компьютера хранит в одной из кодировок. Существует 
довольно много разных кодовых таблиц. Одни из них приспособлены под нужды 
конкретных языков (английский, русский, китайский...), а другие могут обслужи- 
вать множество языков. Если говорить приблизительно, то кодировка — это не- 
которое соответствие между множеством символов, видимых на экране, и тексто- 
вой информацией, как она хранится на жестком диске. 

На деле все гораздо сложнее. Есть символы, которые имеются в разных коди- 
ровках, но соотносятся в них с разными последовательностями байт в памяти 
машины. Можно, таким образом, представить себе кодовую таблицу как своего 
рода ключ — средство расшифровки текста. Пусть некто передал вам последова- 
тельность байт и утверждает, что эта информация — текст. Тогда, чтобы расшиф- 
ровать сообщение и отобразить его в виде символов на экране (подвергнуть об- 
работке, сделать что-нибудь еще), вам надо будет узнать кодировку текста. 

Каким же образом браузер определяет кодировку символов, которые веб-сервер 
передает ему в виде последовательности байт? Приятно, что вас интересует этот 
вопрос. Если вам приходилось работать с заголовками НТТР, то, возможно, вы 
сталкивались с записью следующего вида: 


Соптепё-Туре: Техё/ ит; сһагѕе="исғ-8" 


Это надо понимать так: веб-сервер полагает, что он передает клиенту НТМІ.- 
документ в кодировке ОТЕ-8. 

К сожалению, во всей огромной Всемирной паутине очень немногие создатели 
веб-страниц имеют доступ к НТТР-серверам. Так, например, на отдельных блого- 
вых сайтах, таких как Һ&р://ммм.Біоддегсот, текстовое содержимое пишут пользо- 
ватели, а за работу серверов отвечает Соозе. Вот почему стандарт НТМІ 4 пре- 
дусматривал способ указать кодировку символов в самом документе. Следующая 
запись должна быть вам знакома: 


<теса п р-едиту="Сотет-Туре" сопбет="$ехе/ ит]; сһагѕеё=ит?-8"> 


Это надо понимать так: создатель веб-страницы полагает, что опубликованный 
им документ содержит текст в кодировке ОТЕ-8. 

В НТМІ5 действуют оба описанных способа. Предпочтительно пользоваться 
заголовком НТТР, который (если он есть) переопределяет содержимое тега <тефа>. 
Но вписывать заголовки НТТР разрешено не всем, поэтому свою роль выполняет 
и <пеїа>. Обращаться с ним в НТМТ5 стало чуть легче; теперь можно написать так: 


<тефа спагзе{ =" и Т-8" /> 


Элемент НЕАБ 45 


Эта сокращенная запись работает во всех браузерах. Вот лучшее объяснение ее 
целесообразности из всех, что мне удалось найти (ПЁр://115(5.м3.ога/Агсмез/РиЫюк/ 
риЫііс-ћїті/2007Ји1/0550.Һті): 


Комбинация <теќа сһагѕе= ""> удобна потому, что в клиентских приложениях она фактически 
уже реализована, ведь кавычки при верстке часто опускают, например: 


<МЕТА НТТР-ЕО0ТУ=СопёепЕ-Туре СОМТЕМТ=бежё/ тї; сһагѕе=150-8859-1> 


Есть несколько тестов на распознавание <теёа сһагѕеї> (Һёќр://ѕігтоп.Һёті5.ого/ 
геѕу/Һті/рагѕіпо/епсоаіпд), к которым вы можете прибегнуть, если хотите проверить, 
что браузеры уже поддерживают такую форму записи. 


РАЗМЕТКА В ВОПРОСАХ И ОТВЕТАХ 


Вопрос: Я никогда не пользуюсь странными буквами Ответ: Да, конечно, каждый раз, на каждой сверстанной 

иностранных алфавитов. Неужели мне все-таки надо вами НТМІ-странице! Если не указать кодировку, это 

каждый раз объявлять кодировку текста? может создать уязвимость в защите сайта (НИ р://соде. 
доодіе.сот/р/досќуре/лмікі/Агісеу7). 


Подведем итоги. Кодировками пользоваться непросто, и работать с ними не 
стало проще за те два или три десятка лет, в течение которых горе-авторы, вир- 
туозы копирования и вставки, злоупотребляли услугами плохих программ — 
текстовых процессоров. Но, чтобы избежать нежелательных последствий, обя- 
зательно указывайте кодировку символов в коде каждого НТМІ -документа. Это 
можно сделать с помощью НТТР-заголовка Сопіепі -Туре, или в объявлении <тефа 
һіЕр-едиіу>, или более компактно в объявлении <тефа сһагѕеі>. Только, пожалуй- 
ста, не забудьте. Пользователи Интернета будут вам признательны. 


Ссылочные отношения 


Обычная ссылка (<а һгеҒ>) просто указывает на другую страницу. А вот ссылочные 
отношения — способ вместе с тем пояснить, почему надо указать именно на эту 
страницу. Итак, «я ссылаюсь на данную страницу, потому что...»: 


О ...это таблица стилей, содержащая С5$-правила, которые браузер должен при- 
менить к данной странице; 


О ...это К55-канал с тем же содержимым, что и страница, но в естественном для 
подписки на новости формате; 


О ...это перевод данной страницы на другой язык; 
О ...это то же самое содержимое, но в формате РОЕ; 
О ...это следующая глава книги, опубликованной в Сети, ит. д. 


В НТМІ5 ссылочные отношения подразделяются на две категории (ПЁр://Б. 
у/а2сыв): 
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С помощью элемента ММК можно создавать два типа ссылок. Ссылки на внешние ресурсы 
отсылают к файлам, встраиваемым в текущий документ, а гипертекстовые ссылки ведут к дру- 
гим документам. [...] 

Каким образом ведет себя ссылка на внешний ресурс, зависит от типа объявленного ею от- 
ношения. 


Из приведенных выше примеров только первый (ге1="5уТеѕһееї") представля- 
ет собой ссылку на внешний ресурс, а все остальные — гипертекстовые ссылки. 
Неважно, пожелает ли пользователь перейти по такой ссылке: на отображении 
текущей страницы это никак не скажется. Ссылочные отношения чаще всего за- 
даются тегами <1іпк> внутри контейнера <һеад>. Позволено определять атрибут ге] 
в теге <а>, но это довольно редкий прием верстки. В НТМІ5 разрешено также ука- 
зывать отношения в тегах <агеа>, что еще более редко встречается на практике, 
так как в НТМГА такая возможность отсутствовала. Полная таблица отношений 
(Һр://6ієу/аЗпѕаї) подскажет вам, может ли быть использовано то или иное значе- 
ние атрибута ге]. 


РАЗМЕТКА В ВОПРОСАХ И ОТВЕТАХ 


Вопрос: Можно ли создавать свои собственные ссылоч- поистине неиссякаем. Чтобы не допустить путаницы, 
ные отношения? рабочая группа \МНАТ ведет реестр предложенных зна- 

чений ге! (Реєр://\іКі.лмһатмо.ого/\міКі/ВеГЕхїепѕіопѕ) 
Ответ: Вводить новые ссылочные отношения предла- и определяет процедуру утверждения (Нр://5®.1у/ 


гают многие разработчики; приток идей в этой области да3рѕе). 


ге! = ѕіуІеѕһееі 


Рассмотрим первое ссылочное отношение в исходном коде нашей страницы: 
<1іпк ге1="5уТеѕһееї" пгет=" $фу1е-ог191па1.с$5" фуре="ехё/с$$" /> 


Это, без преувеличения, наиболее популярное в мире ссылочное отношение. Тег 
<Тіпк ге1="ѕуТеѕһееё"> указывает на подключаемый файл с таблицей стилей С$5. 
В духе НТМІ5 было бы внести мелкую упрощающую правку: убрать атрибут буре, 
ведь в Интернете для описания стилей страниц используется только язык С55. 
Останется: 


<1іпк ге]="$$у1езПееф" һгеғ="ѕҰу1е-огідіпа1.сѕ5" /> 


Во всех браузерах эта запись работает (если вдруг кто-нибудь изобретет новый 
язык описания стилей, можно будет снова вписать атрибут іуре). 


ге! = аКегпа{е 
Вернемся к странице-образцу: 


<Тіпк ге] ="а1$егиафе" 
Туре="арр11саёіоп/аёот+хт] " 
$1 1е="Му МерТод Теед" 
һге#=" /Теед/" /> 
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Это ссылочное отношение тоже довольно широко распространено. Тег <1іпк 
ге1="а1їегпаїе"> с атрибутом уре, задающим формат новостного канала №55 или 
Асот, обеспечивает так называемое автоматическое распознавание каналов. Благо- 
даря этому указанию система агрегации лент, например Соозе Кеайег, узнает, что 
на сайте есть новостной канал, передающий самые свежие записи. В большинстве 
браузеров автораспознавание каналов тоже поддерживается: если найдена новостная 
лента, то рядом с ОВІ -адресом страницы будет отображаться специальный значок 
(здесь, в отличие от ге]="$фуТезпее{", атрибут їуре важен. Не удаляйте его!). 

В НТМІ. 4 отношение ге]="а1{егпафе" использовалось самыми разнообразными 
и неожиданными способами. В НТМТ.5 его смысл уточнен и расширен для более 
точного описания существующего веб-содержимого. Как было только что показа- 
но, отношение ге|="а1{егпафе" в сочетании с їуре="арр1ісаііоп/аіот+хті" указывает 
на новостной канал Асот, передающий обновления рассматриваемой страницы. 
Сочетая ге1="а1іегпаїе" с другими значениями атрибута буре, можно ссылаться на 
содержимое такого же рода в других форматах, например РОЕ. 

В НТМІ5, кроме того, решена одна старая проблема: язык страницы-перевода. 
НТМЕ 4 рекомендует пользоваться в данном случае ссылочным отношением 
ге1="а1ёегпаёе" и атрибутом Тапд, но это неверно. Список замеченных неточностей 
(Етгаѓа) стандарта НТМІ 4 упоминает, помимо нескольких мелких недосмотров, 
о четырех ошибках в спецификации. Одна из них касается способа указания язы- 
ка документа, на который ведет ссылка с ге1="а1іегпаіе". Список неточностей, как 
и современный стандарт НТМТ.5, свидетельствует о том, что нужно пользоваться 
атрибутом һге?1апо (к сожалению, этот список так и не был введен в состав специ- 
фикации НТМЕ. 4, потому что после окончания полномочий соответствующей 
рабочей группы МЗС никто из ее членов не занимался стандартом НТМТ.). 


Другие ссылочные отношения НТМІ5 
Рассмотрим и другие ссылочные отношения. 


О ге="агсй1уез" (И&р://ЬЕАу/с УС) — «показывает, что документ, к которому ведет 
ссылка, представляет собой свод записей, документов или иных материалов, 
имеющих исторический интерес. Главная страница блога может ссылаться на 
архив записей с помощью отношения ге1="агсһђіүеѕ"». 


О ге1="ащ{ пог" — используется для ссылки на информацию об авторе страницы. 
Это может быть, например, адрес электронной почты. Ссылка может просто 
вести на форму «Связаться» или страницу «Об авторе». 


О ге]="ехфегиа1" (ИЕр://Ьу/А9ВМО09) — «показывает, что документ, к которому 
ведет ссылка, находится на стороннем сайте». Популярность этому отношению 
придала, как мне кажется, система \огАРгез$, в которой таким способом мар- 
кировались внешние ссылки, оставленные в комментариях к записям. 


О ге1="5ѕ агї", ге] ="ргем" и ге1="пехі" (Һр://Лллл.му3.ого/ТВ/ҺЕті401/+уреѕ.Һті#уре- 
[пК$) — предназначены для того, чтобы описывать отношения между страницами, 
которые являются частью единой последовательности, например главами книги 
или блоговыми записями. Разработчики в большинстве случаев умеют правильно 
пользоваться только ге1="пехі". Вместо ге1="ргеу" писали ге1="ргеуіоиѕ", вместо 
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ге]="5фаг{" — ге1="Бедіп" и ге1="Ғігѕі", а взамен ге1="1аѕї" — ге1="епа". Крометого, 

для ссылки на родительскую страницу веб-программисты придумали обозначение 

ге1="ир". 

В стандарт НТМТ.5 введено отношение ге1="#ігѕі" — самый распространен- 
ный из всех способов обозначить первую страницу последовательности (синоним 
ге1="${агф" оставлен только в целях обратной совместимости и не отвечает новой 
спецификации). Какив НТМГА, в пришедшем ему на смену стандарте сохрани- 
лись ге1="ргеу" и ге]="пех{" (а также, для обратной совместимости, введено от- 
ношение ге1="ргеуіоиѕ"). Добавлены ге1="1аѕі" (заключительная страница по- 
следовательности) и ге1="ир". 

Чтобы понять суть ге1="ир", посмотрите на дублирующую навигационную па- 
нель или хотя бы представьте себе ее. «Хлебные крошки» начинаются с главной 
страницы сайта и заканчиваются той страницей, на которой вы сейчас находитесь. 
В этой ситуации ге1="ир" будет указывать на предпоследнюю страницу ряда. 


О ге1="ісоп" (Нр://ЬАу/ЧАЗУР) — это второе по популярности после ге1="ѕїуТеѕһееї" 
ссылочное отношение (Һр://соде.доодіе.сот/мебѕїаїѕ/2005-12/1іпкгеіѕ.ҺтіІ). Обыч- 
но оно указывает на значок, например, так: 


<1іпк геТ="ѕһогіси 1соп" пгет=" /Ғауісоп. ісо"> 


Связывать таким образом значок со страницей позволяют все основные брау- 
зеры. Маленькая картинка Ғаүісоп. ісо отобразится или в адресной строке брау- 
зера рядом с ОВТ, или в заголовке вкладки, или и там и там. В НТМІ5 есть 
важное нововведение: теперь со ссылочным отношением ге1="ісоп" можно ис- 
пользовать атрибут $17е$, определяющий размер изображения, на которое ссы- 
лается страница (ћЋр://Ьі.Іу/аіАЈОР). 


О ге1="1ісепѕе" (Һр://Ыіу/9п9ХРу) — было придумано сторонниками микрофор- 
матов. Отношение «показывает, что документ, к которому ведет ссылка, пред- 
ставляет собой лицензионное соглашение, на условиях которого доступна дан- 
ная страница». 


О ге1="поғо11ом" (ПЕр://ЬЖАу/сС]5РГ) — «показывает, что ссылка указана не лицом, 
которое создало или опубликовало страницу, или что постановка ссылки обу- 
словлена в первую очередь коммерческими связями между владельцами этих 
двух страниц». Отношение ге1="поѓо11ом" придумали специалисты Сооее; в со- 
обществе разработчиков микроформатов это ссылочное отношение было стан- 
дартизовано. Полагали, что если алгоритм РавеВапкК не будет учитывать ссылки 
с "поғо11ом", то спамеры потеряют интерес к комментированию блогов. Этого не 
произошло, но ге1="по?о11ом" сохранило свою роль. Многие блог-сервисы по 
умолчанию добавляют ге1="поѓо11он" к ссылкам, которые публикуются коммен- 
таторами записей. 


О ге1="погеҒеггег" (Һр://Ыіё.1у/сОМ5Ј9) — «показывает, что никакая информа- 
ция о ссылающейся странице не должна быть передана при переходе по ссыл- 
ке». Эта функция пока не работает ни в одном популярном браузере, но ее 
поддержка была недавно добавлена в «ночные сборки» движка МеБКії, так 
что следует ожидать, что когда-нибудь ге1="погеғеггег" будут поддерживать 
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Ѕаѓагі, Соое Сһготе и другие браузеры на основе У\УеЬКи. Работает ли 
ге1="погеѓеггег" в вашем браузере, можно проверить на ВЫр://меагепидН.сот/ 
рчЫііс/2009/04/ге|-погеѓеггег.ћті. 


О ге1="ріпораск" (Пр://ЬЕУ/СТАСХВ) — указывает адрес пингбэк-сервера. Как по- 
ясняет спецификация (ћ&р://ћіхіе.сһ/ѕресѕ/ріпабаск/ріпдбаск-1.0), «система пинг- 
бэка — это способ автоматически уведомлять владельца блога о ссылках на его 
страницы с других сайтов. [...| Это возможность ставить обратные ссылки, по 
цепочке которых можно проходить не только вперед, как обычно, но и назад». 
На блоговых сервисах, в частности У/’огаРгез$, механизм пингбэка реализован 
так, чтобы уведомлять авторов о ссылках на их посты в постах других авторов. 


О ге="ргеРефси" (пр://ЫЕу/900пм$) — «показывает, что могут быть удобны пред- 
варительная загрузка и кэширование данного ресурса, так как весьма вероятно, 
что он будет востребован пользователем». В том случае, когда самый популяр- 
ный результат поиска по какому-либо запросу превосходит другие по частоте 
обращений во много раз, поисковая система может выдать ссылку такого вида: 
<Тіпк ге1="ргетеёсћ" һге?="<епрһаѕ15$>08 -адрес самого популярного результата</ 
етрһаѕіѕ>">, Так, если в ЕшеЮх поискать через Соов/е по запросу СМ, в коде стра- 
ницы результатов обнаружится слово ргеѓеёсћ. В настоящее время только МохШа 
Еігеѓох поддерживает ге1="ргеғеісћ". 


О ге1="ѕеагсһ" (Һр://ЫіІу/аАркаР) — «показывает, что документ, к которому ведет 
ссылка, предоставляет интерфейс поиска по данному документу и родственным 
ресурсам». Если вы хотите применять ге1="ѕеагсћ" с пользой для себя, поставьте 
ссылку на документ ОрепЅеагсһ, описывающий правила, в соответствии с кото- 
рыми браузер может построить ОВІ -адрес поискового запроса по сайту на какое- 
либо слово. Технологию ОрепЅеагсһ и ссылочные отношения ге|="5еагсй", кото- 
рые указывают на ОрепЅеагсһ-документацию, поддерживают Пиегпеё Ехрогег 
(начиная с версии 7) и МогШа Еігеѓох (с версии 2). 


О ге1="ѕідераг" (Һр://ЬІу/а2ТА9Ю) — «показывает, что документ, к которому ве- 
дет ссылка, должен отображаться (если пользователь перейдет по ссылке) не 
в основном, а во второстепенном контексте». Для браузеров Орега и Мох Ша 
Еігеѓох это значит буквально следующее: когда пользователь щелкнет на ссыл- 
ке, система предложит ему создать закладку для страницы, которая, будучи 
открыта через меню Закладки, отобразится на боковой панели браузера ($14еБаг, 
ванглийской терминологии Орега — рапе!). В Гегпеё Ехр|огег, Ѕаѓагі и Сһготе 
ссылки с ге1="ѕійераг" функционируют как обычные ссылки. Протестировать 
работу ге1="$1аераг" в своем браузере вы можете на странице НИр://меагепидв. 
сот/рибііс/2009/04/геі-ѕідеБаг.Һті. 


О ге1="+ад" (Һр://ЬЄІу/ӘБҮға) — «показывает, что документ, к которому ведет ссыл- 
ка, представляет некоторую категорию и текущий документ относится к этой 
категории». Разметка с помощью категорий (тегов, ключевых слов) в атрибуте 
ге] была придумана программистами Тесһпогай, чтобы удобнее было группиро- 
вать блоговые записи по темам. Поэтому в старых публикациях можно встретить 
такой термин, как «теги Тесһпогабі» (да, все именно так: коммерческая компания 
сумела убедить весь мир в пользе метаданных, которые упрощают работу самой 
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этой компании!). В сообществе разработчиков микроформатов был впослед- 
ствии стандартизован упрощенный синтаксис ге1="Ёад". На большинстве таких 
блоговых сервисов, где разрешено связывать отдельные записи с категориями 
или ключевыми словами, используется именно ссылочное отношение ге1="ад". 
Браузеры не делают с такими ссылками ничего особенного, а вот поисковики 
судят по ним о тематике страниц. 


Новые семантические элементы НТМІ5 


Приведение разметки к стандарту НТМТЬ не только укорачивает запись. Это шанс 
воспользоваться набором новых семантических элементов. Рассмотрим теги, опре- 
деленные в спецификации НТМТ5. 


О _ <5ес{101> — обобщенно понимаемый раздел документа или приложения. В дан- 
ном контексте раздел — это порция содержимого, сгруппированная по темати- 
ческому признаку и, как правило, оснащенная заголовком. Примеры разделов — 
главы в книгах, вкладки в диалоговых окнах, пронумерованные части научных 
публикаций. Главная страница сайта может содержать несколько разделов: вво- 
дные замечания, новости, контактная информация и пр. 


О <па\> — раздел, содержащий ссылки на другие страницы или на части данной 
страницы, то есть навигационный раздел. Тегом <пау> следует оформлять не все 
группы ссылок на странице; его назначению отвечают только большие навига- 
ционные блоки. В частности, нижний колонтитул обычно содержит несколько 
ссылок на разные страницы сайта: соглашение об использовании, главная стра- 
ница, информация об авторах... Для верстки в этом случае подойдет тег <Роофег>, 
а надобности в <па\> нет. 


О <агїісТе> — фрагмент страницы, документа, изображения или целого сайта, ко- 
торый самостоятельно значим, может независимо распространяться или по- 
вторно использоваться (например, в агрегаторах лент). Это может быть запись 
на форуме, в блоге, статья в журнале или газете, пользовательский коммента- 
рий, интерактивный виджет или гаджет, а также любая другая независимая 
единица контента. 


О <аѕійе> — раздел страницы, содержимое которого лишь косвенно связано с те- 
мой всего прочего содержимого документа и может рассматриваться отдельно 
от него. В полиграфии такие разделы зачастую оформляются как врезки. Тег 
<аѕіае> можно использовать для создания «типографских» эффектов врезки, 
выделенной цитаты, для рекламных блоков (теглайнов), групп тегов <пау> и для 
прочего неосновного содержимого страницы. 


О <һодгоир> — заголовок раздела. Контейнер <Пдгоур> используется для группиров- 
ки тегов <11>..<И6>, которые представляют собой заголовки разных уровней: 
основной, подзаголовок, рекламный слоган, второе название. 


О <пеадег> — верхний колонтитул. Это группа вспомогательных материалов ввод- 
ного или навигационного характера. Считается желательным, но не обязатель- 
ным, чтобы тегом <һеайег> был оформлен заголовок раздела — группа тегов 


Большое отступление о том, как браузеры обрабатывают незнакомые элементы 51 


<11>..<й6> или тег <һдгоир>. Кроме того, <һеайег> иногда содержит оглавление 
раздела, форму поиска и логотип (-ы). 


О <Гоофег> — нижний колонтитул родительского элемента: раздела или всей стра- 
ницы. Обычно содержит информацию о разделе и его создателе, ссылки на род- 
ственные документы, замечания об авторских правах и т. п. Нижний колонтитул 
не всегда, но обыкновенно находится в конце раздела. Он может и сам содержать 
несколько разделов, в качестве которых, как правило, выступают приложения, 
указатели, выходные данные, многословные лицензионные соглашения и другое 
содержимое подобного рода. 


О <ііте> — может содержать указание времени по 24-часовой шкале или точной 
даты по григорианскому календарю, в запись которой можно также включить 
время и часовой пояс. 


О <тагК> — подсвечивает на странице какой-либо важный текст, к которому поль- 
зователь, возможно, еще пожелает вернуться. 


Понимаю, что вам не терпится приступить к использованию новых элементов, ина- 
че вы бы уже давно бросили читать эту главу. Однако отвлечемся еще ненадолго. 


Большое отступление о том, как браузеры 
обрабатывают незнакомые элементы 


Каждый браузер «знает», поддержка каких НТМТ-элементов в нем совершенно 
точно реализована. Например, браузер Мо2Ша Еігеѓох хранит список таких эле- 
ментов в файле пѕЕ1етепіТар1е. срр (НЕр://тхг.то7Иа.ога/зеатопкеу/зоигсе/рагзег/ 
һётірагѕег/ѕгс/пѕЕіетепТаЫе.срр). Элементы, не входящие в этот список, расцени- 
ваются программой как незнакомые. Для обработки незнакомых элементов надо 
ответить на два вопроса. 


РАЗМЕТКА В ВОПРОСАХ И ОТВЕТАХ 


Какой стиль следует применить к элементу? тов может принимать как дочерние каждый из зна- 
комых элементов. Запись вида <р><р> означает 
сточки зрения браузера, что перед началом второго 
абзаца первый заканчивается: это элементы-сестры 
(а не родительский и дочерний). Но если написать 
<р><ѕрап>, то <5рап> не закроет абзац, потому 
что (как знает Еігеѓох) <р> — это блочный тег, 
а <5рап> — строковый. Значит, в Р0М-иерархию 
В файле пзЕетеп(ТаЫе.срр браузера Мо7Ша Еігеѓох <5рап> будет помещен как дочерний относитель- 
содержится информация о том, какие типы элемен- но <р>. 


Так, например, контейнер <р> имеет отступы сверху 
и снизу, <Москаиое> — поле слева, а заголовок 
<һ1> отображается более крупным шрифтом, чем 
основной текст. 


Каково место элемента в иерархии РОМ? 


Разные браузеры по-разному отвечают на эти вопросы (непривычного человека 
такое откровение может обескуражить). Из числа популярных браузеров больше 
всего трудностей в этом деле испытывает ГПуфегпес Ехрогег. 

Ответить на первый вопрос вроде бы довольно просто. Незнакомым элемен- 
там не следует приписывать какой-либо особый стиль, а надо просто позволить 
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унаследовать стили, описанные для них в явном виде в С55-таблице при верстке. 
Однако Гъсегпес Ехрогег версий 6, 7 и 8 не применяет стили к незнакомым эле- 
ментам. Так, если в коде страницы написано: 


<ѕїуТе фуре="{ех(/с$$"> 

агіісТе { аіѕрТау: рТоск; рогаег: 1рх $0114 геа } 
</ѕїуТе> 
<агііс1е> 

<11>Добро пожаловать в Ад`</ћ1> 


<р>Вы здесь <ѕрап>первый день</зрап>.</р> 
</агіісТе> 


то Іпбегпеё Ехр|огег (до ТЕ8 включительно) не обведет содержимое элемента АВТТСЕЕ 
рамкой красного цвета. Когда писались эти строки, Гаќегпе ЕхрІогег 9 еще пре- 
бывал в стадии бета-тестирования, но М!сгозой заявляет, что в 9-й версии таких 
проблем не будет (это подтверждают и разработчики). 

Вторая проблема — построение ООМ-иерархии. С этим Ірќегпеѓ Ехрогег тоже 
справляется хуже других популярных браузеров. Если ІЕ не распознает элемент 
как знакомый, он вставит его в ОМ как пустой узел без потомков и все элементы, 
которые, по мнению веб-программиста, должны выступать как дочерние по отно- 
шению к нему, окажутся его сестрами. 

Покажем различие с помощью несложных схем. Вот ОО М-дерево, построенное 
в соответствии с требованиями НТМІ5: 


агііс1е 


+-һ1 (дочерний узел агііс1е) 


| +-текстовый узел "Добро пожаловать в Ад" 


+-р (дочерний узел агііс1е, сестра 11) 


+-текстовый узел "Вы здесь " 
+—врап 


+-текстовый узел "первый день" 


+-текстовый узел 
А вот ООМ-дерево, которое строит Іһќегпеѓ ЕхрІогег: 


агїісТе (нет потомков) 

11 (сестра агііс1е) 

| 

+—текстовый узел "Добро пожаловать в Ад" 
р (сестра ћ1) 


' В оригинале упомянута вымышленная компания Іпіќесһћ из комедии «Офисное про- 


странство», малоизвестной у нас. — Примеч. перев. 
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+-текстовый узел "Вы здесь " 
+—зрап 


+—текстовый узел "первый день" 


+-текстовый узел "." 

Существует удивительный способ устранить эту проблему. Если с помощью 
ахуазст!ре создать пустой тег <агііс1е>, то, прежде чем этот тег в действитель- 
ности будет задействован на странице, Гбегпеё ЕхрІогег волшебным образом об- 
наружит <агїіс1е> и применит к нему нужный стиль. В ООМ-иерархию этот пу- 
стой тег не попадает, однако достаточно одной вставки (на страницу), чтобы ТЕ 
«научился» правильно оформлять все незнакомые элементы такого типа на стра- 
нице. Образец: 


<«ћїт1> 
<һеаа> 
<ѕүуТе> 
агіїіс1е { аїіѕрТау: БТоск; рогаег: 1рх $0114 геа } 
</ѕЕуТе> 
<ѕсгірі>аоситеп . сгеаеЕ1етепі (“агїїс1е”) ; </ѕсгірі> 
</һеаа> 
<роду> 
<агїіс1е> 
<1>Добро пожаловать в Ад</ћ1> 
<р>Вы здесь <ѕрап>первый день</ѕрап>.</р> 
</агііс1е> 
</роду> 
</пт1> 


Такая запись работает корректно во всех версиях Пицегпеё Ехротег, вплоть 
до ІЕб. 

Более того, можно вставить на страницу по одному разу все элементы НТМІ5. 
Они не попадают в РОМ, и пользователь их не видит, но за счет такой вставки веб- 
мастер может прибегать к новым возможностям, не беспокоясь об отображении 
страниц в браузерах без поддержки НТМТ.5. Эту задачу решил Реми Шарп (Вету 
Ѕһагр) (Һ&р://гетуѕһагр.сот/2009/01/07/һті5-епабііпо-ѕсгірё). Его сценарий имеет не- 
сколько версий, код которых в упрощенном виде выглядит одинаково 


<!-- [НР ТЕ ТЕ 9]> 
<$сг1рф> 
уаг е = ("аррг,агіісТе, а514е, аидтїо, сапуа$ , аата11ѕї, аеїаі15," + 
"Ртдиге , Ғоотег , пеадег, һдгоир, тагк ,тепи, тефег , пау, оиёриї," + 
"ргодгез$ , ѕесіїоп,іте, уійео" ).$ртії(', '); 
Тог (маг 1 = 0; 1 < е.Тепоёћ; 1++) { 
аоситепё .сгеаёеЕ1етепі (е[11) ; 
} 
</ѕсгірі> 
<1[епаї?#]--> 
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Строки <! --[1# 1% ТЕ 9]> и <! [епаі#)--> открывают и закрывают условный ком- 
ментарий соответственно. Глбегпеё Ехрогег видит в них утверждение: «Если теку- 
щий браузер — Пщегпеё Ехр|огег вплоть до 8-й версии, то исполнить следующий 
код». Все остальные браузеры обращаются с условным комментарием, как и с лю- 
бым другим НТМТ-комментарием. В результате Пщегпеё Ехр|огег вплоть до 8-й вер- 
сии запускает сценарий, а любой другой браузер игнорирует его, что ускоряет за- 
грузку страницы. 

Сам по себе код на ЈауаЅсгірї, приведенный выше, довольно прямолинеен. В пе- 
ременную е заносится массив строк вида "арг", "агїіс1е" и т. д. Цикл перебирает 
эти строки (названия НТМТ.5-элементов) и командой оситепї .сгеаїеЕ1епепі () соз- 
дает соответствующие пустые элементы. Поскольку возвращаемые значения не 
присваиваются никакой переменной, элементы не попадают в РОМ. Однако для 
Тпсегпе Ехрюгег этого достаточно: когда далее на странице будут встречаться не- 
пустые элементы тех же типов, они будут правильно отображаться. 

Обратите внимание: «далее на странице». Сценарий должен располагаться в на- 
чале документа и желательно внутри контейнера <ћеас>, а не в его конце. Таким 
образом, Гбегпеё Ехр]огег будет сначала исполнять сценарий и только потом раз- 
бирать теги и атрибуты. Если убрать сценарий далеко вниз, то будет уже поздно: 
Тпсегпеѓ Ехр|огег неверно интерпретирует разметку страницы и ошибочно постро- 
ит ООМ-иерархию. Повторный разбор кода страницы выполняться не будет. 

«Облегченную» версию своего сценария Реми Шарп поместил в репозиторий 
Соое Со4е (Һр://сойе.доодіе.сот/р/ћёті5ѕһім/). Сценарий распространяется под 
лицензией МІТ с открытым исходным кодом, так что вы можете пользоваться им 
в любом своем проекте. Можно даже ссылаться непосредственно на версию, хра- 
нимую Сооз[е: 


<һеад> 
<тефа сһагѕеі="иї?-8" /> 
< Ие>Мой блог</{1Те> 
<!-- [ЧР 16 ТЕ 9]> 
<5сгірі згс=”П р: //һЕт155һ1ім.доод1есоде. сот/ѕуп/Египк/һЕт15. ]5”></$сг1рф> 
<! [епт] --> 
</һеад> 


Теперь мы готовы приступить к использованию новых семантических элемен- 
тов НТМГ5. 


Верхн ие колонтитулы 


Вернемся к странице, с которой мы экспериментируем, и обратим внимание на 
верхний колонтитул": 


<Фу 14="Пеааег"> 
<ћ1>Мой блог</һ1> 


' Основной английский текст веб-страниц дается здесь и далее в русском переводе. — 


Примеч. перев. 
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<р с1а$$5="$а91]1пе">Только сложные пути ведут к простым решениям. </р> 
</а1у> 


<аіу с1аѕѕ="епігу"> 
<12>День в дороге</ћ2> 
</41іу> 


<а1у сТаѕ5="епігу"> 
<12>Я еду в Прагу! </һ2> 
</аіу> 


Такая верстка вполне корректна. Если угодно, ее можно оставить как есть, по- 
тому что это валидный НТМТ.. Однако в НТМІ5, как мы знаем, есть особые се- 
мантические элементы для колонтитулов и разделов. 

Первым делом избавимся от <йіу ій="һеайег">. Это популярная форма записи, 
но она ничего не значит. У тега <Ч1у\> нет собственной семантики, как и у атри- 
бута 14 (это, конечно, взгляд с точки зрения клиентских программ, которые не 
умеют судить о содержании информационного блока по значению атрибута 19). 
Можно было бы назвать тот же контейнер <іу 19="ргемед"> — и ничего бы не 
изменилось. 

В НТМІ5 для оформления верхних колонтитулов есть тег <һеайег>. Специфи- 
кация приводит много примеров использования <Пеадег> в прикладных задачах 
верстки. Код нашей страницы после внесенной правки будет выглядеть так: 


<пеадег> 
<1>Мой блог</һћ1> 
<р с1аѕѕ="Еад1іпе">Только сложные пути ведут к простым решениям. </р> 


</пеадег> 

Стало лучше, правда? Теперь из кода ясно, что перед нами верхний колонтитул 
Пора взяться за подзаголовок-теглайн, который здесь сверстан обычным, но не стан- 
дартизованным (как это теперь стало возможно) способом. Оформить теглайн — 
непростая задача: он должен вести себя как подзаголовок, привязанный к основно- 
му заглавию, то есть подзаголовок без следующего за ним раздела. 

Заголовочные теги, такие как <11> и <12>, определяют структуру страницы. Взя- 
тые в совокупности, они формируют краткое содержание документа, в соответ- 
ствии с которым может быть организована навигация по странице. Программы 
экранного доступа, опираясь на краткое содержание, помогают слепым пользова- 
телям ориентироваться на страницах. Есть веб-сервис (НЕр://дзпеддег$. ии !5.ога/ 
оийіпег/) и браузерное расширение (ПЁр://спивредейск.сот/ммогк/меБ-демеорег/), ко- 
торые умеют графически представлять краткое содержание страниц 

В НТМІ. 4 построить краткое содержание страницы можно было только на осно- 
ве тегов <ћ1>..<һ6>. Схема страницы-образца выглядит таким образом: 


Мой блог (11) 
| 


+—День в дороге (12) 


| 
+-Я еду в Прагу! (12) 
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Здесь все в порядке, но теглайну «Только сложные пути ведут к простым реше- 
ниям» места не нашлось. Если бы мы поместили его в контейнер <12>, в кратком 
содержании документа появился бы пустой узел: 


Мой блог (11) 
| 


+—Только сложные пути ведут к простым решениям. (12) 


+—День в дороге (12) 


| 
+-Я еду в Прагу! (12) 


На самом же деле структура документа не такая. Теглайн не является заголов- 
ком одной из записей блога: это подзаголовок, обособленно помещенный на стра- 
ницу. А если спрятать теглайн в <12>, а заголовок каждой записи — в <13>? Нет, так 
будет только хуже: 


Мой блог (11) 
| 


+—Только сложные пути ведут к простым решениям. (12) 


+—День в дороге (13) 


| 
+-Я еду в Прагу! (13) 


В кратком содержании документа по-прежнему есть пустой узел, который 
к тому же присвоил дочерние узлы, по праву принадлежащие корню иерархии. 
В этом вся незадача: НТМТ. 4 не позволяет оформить теглайн так, чтобы он, бу- 
дучи одним из подзаголовков, тем не менее не попадал в краткое содержание стра- 
ницы. Как бы мы ни старались перехитрить компьютер, слова «Только сложные 
пути ведут к простым решениям» неминуемо осядут в одном из узлов структуры. 
Вот почему семантически бессмысленную верстку вида <р с1а$$="{а911пе"> мы 
сочли меньшим злом. 

Решение, которое предлагает НТМІ5, заключается в применении тега <ћогоир>. 
Он функционирует в качестве обертки для двух или нескольких связанных заго- 
ловков. Называя их связанными, мы имеем в виду, что в кратком содержании до- 
кумента они образуют единый узел. При следующем коде страницы: 


<пеадег> 
<һдгоир> 
<й1>Мой блог</ћ1> 
<һ2>Только сложные пути ведут к простым решениям. </ћ2> 
</пагоир> 


</һеадег> 
<аіу сТаѕѕ="епігу"> 
<И2>День в дороге</һ2> 


</аіү> 


<аіу сТаѕѕ="епігу"> 
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<12>Я еду в Прагу! </һ2> 
</41іү> 


краткое содержание будет выглядеть таким образом: 


Мой блог (ћ1 в составе һдгоир) 
| 
+—День в дороге (12) 


| 
+-Я еду в Прагу! (12) 


Чтобы убедиться, что вы правильно пользуетесь заголовками, тестируйте соз- 
даваемые вами страницы на сайте НТМТ.5 Оц шег. 


Рубрикация 


Разберемся, как можно преобразовать дальнейший код: 


<а1у сТаѕѕ5="епігу"> 
<р с1аѕ5="роѕї-даїе">22 октября 2009 г.</р> 
<ђ2% 
<а һгеғ="#" 
ге1="Брооктагк" 
ї1ЕТе="ссылка на эту запись"> 
День в дороге 
</а> 
</2> 


</а1у> 
Это тоже валидный НТМТ.5. Однако в НТМІ5 есть тег <агііс1е>, использова- 


ние которого (в общем случае) при разбивке страницы на статьи или записи более 
оправданно: 


<агііс1е> 
<р с1аѕ5="роѕі-аате">22 октября 2009 г.</р> 
<һ2> 
<а һге?="#" 


ге1="Брооктагк" 
ї1ЕТе="ссылка на эту запись"> 
День в дороге 
</а> 
</һ2> 


</агїіс1е> 
Однако все не так просто, и понадобится внести еще одно изменение, которое 
я сначала покажу, а потом объясню: 


<агііс1е> 
<пеадег> 
<р с1аѕ5="роѕї-йаїе">22 октября 2009 г.</р> 
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<ћ1> 
<а Пге?="#" 
ге1="рооктагк" 
ЕіїЛе="ссылка на эту запись"> 
День в дороге 
</а> 
</ћ1> 
</һеайег> 
</агїісТе> 

Ясно? Тег <12> был заменен тегом <ћ1> в обертке <Пеадег>. Как работает тег <һеайег>, 
вы уже видели. В данном случае его функция — заключать в себя все элементы верх- 
него колонтитула записи (дату публикации и название). Но... как быть с тем, что в до- 
кументе должен быть только один заголовок <ћ1>? Не пострадает ли от нашей правки 
краткое содержание документа? Нет. Чтобы понять почему, вернемся на шаг назад. 

В НТМЕ 4 краткое содержание строилось с опорой только на теги <ћ1>..<6>. 
Если веб-мастер хотел видеть в смысловой схеме документа один корневой узел, 
он должен был ограничиться лишь одним заголовком <ћ1>. Но спецификация 
НТМТ5 задает новый алгоритм построения краткого содержания с учетом совре- 
менных семантических тегов. Согласно этому алгоритму, тег <агііс1е> создает но- 
вый раздел, то есть очередной дочерний узел корня краткого содержания. Между 
тем в НТМІ5 внутри каждого раздела может иметься свой собственный тег <11>. 

Итак, произошла большая и, как мы сейчас увидим, благотворная перемена. 
Действительно, многие веб-страницы сверстаны по образцам: часть содержимого 
берется из одного источника и вставляется куда-либо на страницу, другой фраг- 
мент (из другого источника) помещается еще куда-то. Этот подход поощряют мно- 
гие руководства по гипертекстовой разметке: «Вот кусок НТМГ-кода, скопируйте 
его и вставьте на страницу». Если копируется небольшая порция кода, то проблем 
обычно не возникает; но как быть с копированием и вставкой целых разделов? 
Тогда в руководствах писали, к примеру, так: «Вот кусок НТМТ-кода. Скопируй- 
те его, вставьте в текстовый редактор и отредактируйте теги-заголовки, чтобы они 
согласовывались по вложенности с соответствующими заголовками страницы, на 
которую вы затем будете вставлять данный код». 

ВНТМЕ 4 не было обобщенного заголовочного элемента, а было шесть заголов- 
ков от <ћ1> до <16>: числа в названиях тегов строго определяли порядок вложения. 
Контролировать такую иерархию, мягко говоря, неудобно, особенно на странице 
которая не «написана» (в собственном смысле), а «собрана» из фрагментов. Эта 
проблема решена в НТМТ.5 благодаря новым элементам, вводящим разделы, и но- 
вым правилам использования существующих тегов-заголовков. Если вы не боитесь 
применять семантические элементы верстки, советую писать так: 


<агїіс1е> 
<Пеадег> 
<1>Моя запись в блоге</ћ1> 
</пеааег> 
<р>Ёогет 1рзим.. (и далее по тексту классического текста- "рыбы" )</р> 
</агііс1е> 


59 


Дата и время 


Этот фрагмент кода можно копировать и вставлять в любое место страницы, 
ничего в нем не меняя. Имеющийся здесь тег <ћ1> не предоставляет проблем, по- 
тому что целое заключено в контейнер <агііс1е>. Тег <агііс1е> объявляет само- 
стоятельный узел в кратком содержании документа, тег <ћ1> задает имя этого узла; 
уровень вложенности всех прочих элементов страницы, отвечающих за дробление 
на разделы, остается таким, каким должен быть. 


СЕКРЕТЫ РАЗМЕТКИ 


В действительности все чуть сложнее, чем описа- 
но здесь. Новая система тегов «явной» рубрикации, 
таких как <һ1> в обертке <агїісіе>, может весь- 
ма неожиданным образом взаимодействовать со 
старой системой «скрытой» рубрикации (собственно 
заголовками <ћ1>...<һб>). Использование одной 


из этих двух методик верстки, а не обеих сразу суще- 
ственно облегчит ваш труд. Если зачем-либо надо 
сделать на одной странице «явные» и «скрытые» раз- 
делы, не поленитесь проверить с помощью НТМЕ5 
Ошііпег, правильно ли выглядит краткое содержание 
вашего документа. 


Дата и время 


Захватывающе, правда? Не так захватывающе, конечно, как нагишом съезжать 
с Эвереста на лыжах, но ровно настолько, насколько вообще может быть захва- 
тывающей семантическая верстка. Вернемся к странице-образцу и обратим вни- 
мание на следующие строки: 
<аіу с1аѕѕ="епігу"> 

<р с1а55=”роѕі-ааїе”>22 октября 2009 г.</р> 

<И2>День в дороге</ћ2> 
</а1у> 


Все то же самое, правда? Указывать дату публикации статьи или записи в бло- 
ге — обычная практика, но для этого до недавних пор не существовало семантиче- 
ского тега и верстальщику приходилось прибегать к обобщенной форме записи 
с нестандартным значением атрибута с1аѕ5. В НТМТ.5 такая запись по-прежнему 
работает, в ней не обязательно что-либо менять. Но специально для таких случаев 
стандарт НТМТ.5 предусматривает тег < 1те>: 


<ііте дафе1те=" 2009-10-22" рибдафе>22 октября 2009 г.</ї1те> 


В теге <їіте> три составные части: 
О метка времени в машиночитаемом формате; 
О текстовое содержимое, которое отображается для читателя-человека; 
О необязательный флажок риБдафе. 
В нашем примере атрибут дафе1те содержит информацию только о дате, без 
указания времени. Формат даты — ГГГГ-ММ-ДД: 
<ііте дафе{1те="2009-10-22" рибдафе>22 октября 2009 г.</Еіте> 


Чтобы добавить информацию о времени, допишите после даты букву Т, время 
в 24-часовом формате (ЧЧ:ММ:СС) и далее, через дефис, разницу поясного времени 
с Гринвичем: 
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<ілте адатеїіте="2009-10-22713:59:47-04:00" рибаафе> 
22 октября 2009 г. 13:59 ЕТ! 
</1те> 


Формат представления даты и времени очень гибок. Спецификация НТМІ5 
содержит множество образцов корректно оформленных значений атрибута да%е- 
{1те. 

Вы, наверное, заметили, что текст, заключенный между < 1те> и </їіте>, в по- 
следнем примере поменялся вместе с машиночитаемой меткой времени. Стандарт 
не требует этого: если вы проставили метку времени (значение атрибута даёеїіте), 
то текстовое содержимое тега < 1те> может быть каким угодно. В НТМТ.5 валиден 
такой код: 


<ілте адатеїіте="2009-10-22">Дело было в прошлый четверг</{1те> 

И даже такой: 
<Е1те даїеііте="2009-10-22"></іте> 

Осталось рассмотреть атрибут рибда\е. Он булевозначен, то есть играет роль его 
наличие или отсутствие. Верна такая запись: 
< те дафеф1те="2009-10-22" рирааїе>22 октября 2009 г.</ііте> 

Если вам не по душе атрибуты без значений, можно (равносильно) написать так: 
<ілте аатеїіте=" 2009-10-22" рибдафе=”рибдафе”>22 октября 2009 г.</{1те> 


Атрибут риБдате значит одно из двух. Если тег <Е1те> заключен внутрь контейне- 
ра <агїіс1е>, то при указанном риБдате метка времени — это дата публикации статьи 
или записи. Если же < 1те> не отнесен ни к одному из разделов <агїіс1е>, то при 
заданном рибда{е метка времени указывает на дату публикации всего документа. 

Вот как использование новых возможностей НТМТ. изменит верстку нашей 
условной записи в блоге: 


<агіісТе> 
<һеадег> 
<ілте аатеїіте=" 2009-10-22" рибдафе> 
22 октября 2009 г. 
</{1те> 
<«һ1> 
<а һге?="#" 
ге1="рооктагк" 
і1ЕЛе="ссылка на эту запись"> 
День в дороге 
</а> 
</ћ1> 
</һеадег> 
<р>Гогет ірѕит.. (и далее по тексту классического текста- "рыбы" )</р> 
</агїіс1е> 


ЕРТ (Еазего Рауіеће Тіте) — единое время Восточного побережья США. — Примеч. 
перев. 
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Навигация 


Навигационная панель — одна из важнейших составных частей любого сайта. Так, 
в верхней части всех страниц сайта СММ.сот есть горизонтальная панель со ссылками 
на разные новостные рубрики: Технологии, Здоровье, Спорт и т. д. На страницах поис- 
ковой выдачи Соозе имеется аналогичная панель, с помощью которой можно пере- 
адресовать поисковый запрос вспомогательным сервисам Сооз|е: Картинки, Видео, 
Карты и пр. На странице, с которой мы экспериментируем, навигационная область 
в составе верхнего колонтитула содержит ссылки на разные рубрики нашего гипоте- 
тического сайта: главную страницу, блог, галерею фотографий и сведения об авторе. 
Исходно верстка навигационной панели такова: 
<аіу 14="пау"> 
<и1> 
<11><а һгеғ="#">Главная страница</а></11> 
<11><а һгеғ="#">Блог</а></1і> 
<11><а Пгеғ="#">Фотоальбом</а></11> 
<11><а һгеғ="#">0бо мне</а></11> 
</и]> 
</а1у> 


Это, как уже нетрудно догадаться, валидный НТМІ15. Но ничто не говорит кли- 
ентской программе, что данный список из четырех элементов — часть навигацион- 
ного содержимого сайта. Внешне об этом свидетельствуют месторасположение 
(верхний колонтитул) и текст ссылок, но семантически этот список ссылок ничем 
не отличается от любого другого. 

Для кого же столь важна семантическая верстка сайтовой навигации? Прежде все- 
го для людей с ограниченными возможностями (Һ&р://аімеіпіоассеѕѕіЫііїу.ого). Рассмо- 
трим следующую ситуацию. Пусть, например, вы ограничены в движениях и не може- 
те или с трудом можете пользоваться мышью. Тогда, по-видимому, ради удобства вы 
установите браузерное расширение, упрощающее переход к важнейшим навигацион- 
ным ссылкам. Или другой случай: допустим, у вас слабое зрение и вы пользуетесь 
специальной программой экранного доступа, которая, преобразуя печатный текст 
в речь, «проговаривает» ключевую информацию веб-страниц. Второй после заголовка 
(по порядку чтения) особенно информативный элемент страницы — это блок основ- 
ных навигационных ссылок. Вы, вероятно, настроите программу так, чтобы она после 
заголовка зачитывала содержимое навигационной панели или (если в этом нет необ- 
ходимости) сразу переходила к основному содержанию страницы, которое обычно 
следует за навигационной панелью. Так или иначе возможность программно опреде- 
лять, какая группа ссылок представляет собой навигационный блок, очень важна. 

Как видите, применение <йіу 19="пау"> не считается ошибкой, но вместе с тем 
оно и не слишком верно в современных условиях. В НТМТ. на благо множества 
людей появился тег верстки навигационных блоков <пау>: 


<па\> 
«и> 
<11><а һгеғ="#">Главная страница</а></11> 
<11><а һгеғ="#">Блог</а></1і> 
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<11><а һге?="#">Фотоальбом</а></1і> 
<11><а Пге{="#">06о мне</а></11> 
</и1> 


</пау> 
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РАЗМЕТКА В ВОПРОСАХ И ОТВЕТАХ 


Вопрос: Совместимы ли 5Кір-ссылки ($Кір Іїпкѕ) с тегом 
<пау>? Сохраняется ли потребность в них в НТМІ5? 


Ответ: 5Кір-ссылки позволяют читателю пролистывать 
навигационные блоки. Люди с ограниченными воз- 
можностями, использующие стороннее ПО для чтения 
веб-страниц и навигации без мыши, считают ѕКір- 
ссылки очень полезными. Подробнее о том, зачем 
и как оформлять ссылки этим способом, читайте на 
сайте Ћр://лмумммераіт.огд/есһпідиеѕ/Кірпаү. 


Как только программы экранного доступа начнут рас- 
познавать тег <пау>, потребность в $Кір-ссылках отпа- 
дет: программа-диктор будет сама предлагать пользо- 
вателю пропустить навигационный блок, обернутый 
контейнером <паү>. Впрочем, не следует ожидать, 
что все пользователи с ограниченными возможностя- 
ми в ближайшем будущем перейдут на программы 
споддержкой НТМІ5-тегов, так что пока для пролисты- 
вания <паү>-рубрик следует продолжать указывать 
ѕКір-ссылки. 


Нижние колонтитулы 


Наконец мы добрались до конца страницы. Последний в документе контейнер — 
нижний колонтитул — и есть последнее, о чем мне хочется здесь сказать. Первона- 
чально нижний колонтитул был сверстан так: 


<Чу 14="Тообег"> 

<р>&#167 ;</р> 

<р>8#169; 20014#8211;9 <а һгеғ="#">Марк Пилгрим</а></р> 
</а1у> 


Это валидный НТМІ5, и можно было бы оставить код таким, если бы в НТМІ5 
не появился специальный тег <Ғооїег>: 


<Ғооїег> 

<р>4#167 ;</р> 

<р>8#169; 20018#8211:9 <а һгеғ="#">Марк Пилгрим</а></р> 
</ҒооТег> 


Что следует помещать внутрь контейнера <ооёег>? Видимо, все то же, что сей- 
час веб-мастера оформляют с помощью <а1\ ій=" Ғооёег">. Этот уклончивый ответ 
приводит к порочному кругу. Обратимся к спецификации НТМІ5, которая гласит: 
«Нижний колонтитул, как правило, содержит информацию о разделе: указание 
авторства, ссылки на родственные документы, сведения об авторских правах идр.». 
В нашем примере все именно так: короткое уведомление о защите прав и ссылка 
на страницу Об авторе. В том, как велики потенциальные возможности нижних 
колонтитулов, можно убедиться, глядя на страницы популярных сайтов. 

О Нижний колонтитул сайта СММ содержит уведомление о защите прав, ссылки 
на переводные версии сайта, ссылки на соглашение об использовании, страни- 
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цу сведений о конфиденциальности, страницы О нас, Связаться и Справка. Весь 
ЭТОТ материал вполне отвечает назначению тега <Ғооїег>. 


О В нижней части главной страницы Соозе, которая известна своей неоднород- 
ностью, есть ссылки на страницы Решения для предприятий, Все о Соодіе, уведом- 
ление о защите прав и ссылка на страницу политики конфиденциальности. Все 
это тоже можно собрать в единый <Гоо{ег>. 


О Нижний колонтитул моего блога (Вр://Аметюогтагк.ога) содержит ссылки на дру- 
гие мои сайты и уведомление о защите прав — идеальный вариант для <Госбег>. 
Стоит отметить, что ссылки не следует помещать внутрь тега <пау>, потому что 
в данном случае это не часть внутрисайтовой навигации, а всего лишь собрание 
ссылок на другие мои проекты на сторонних сайтах. 


«Тяжелые» нижние колонтитулы (ПЁр://\{-раКегп$.сот/раКегп/Ра{Рос{ег) в наши 
дни приобрели большую популярность. Взгляните, например, на нижний колон- 
титул сайта МЗС (Һр://млуу.м3.0г9). В нем три столбца: МамдаНоп (Навигация), 
Сопкасе МЗС (Связь с МЗС) и МЗС Орааѓеѕ (Новости МЗС). Этот колонтитул свер- 
стан приблизительно так (текст передается в русском переводе): 


<аіу 14="м3с_Тоофег"> 
<аіу сТаѕѕ="мЗс Ғооїег-пау"> 
<1З>Навигация</ћ3> 
<и1> 
<11><а һге?=" /">Главная страница</а></11> 
<11><а һге?=" /ѕЕапдагаѕ/">Стандарты</а></11> 
<11><а һге?=" /рагїісіраёе/ ">Участие</а></11> 
<11><а һге?=" /Сопѕогііит/тетрегѕћір">Членство</а></11> 
<11><а һге?=" /Сопѕогіїит/ ">0 Консорциуме</а></11> 


<аіу сТаѕѕ="мЗс Рооїег-пау"> 
<13>Связь с МЗС</А3> 


<11><а һге?=" /Сопѕогііит/ сопёас">Связаться</а></11> 
<11><а һге?=" /Не1р/">Справка и ЧаВо</а></11> 

<11><а һге?=" /Сопѕогііит/ ѕир">Финансовая помощь</а></11> 
<11><а һге?=" /Сопѕогіліит/ ѕіеїіпаех">Карта сайта</а></11> 


<аіу сТаѕѕ5="мЗс Ғоотег-пау"> 
<й3>Новости МЗС</А3> 
<и1> 
<11><а һге?= "Пір: //ЕміїТег. сот/ЗС">Мы в Ти бег</а></11> 
<11><а һге?= "Пір: //ідепїі . са/мЗс">Мы в Ійепїі.са</а></11> 
</и1> 
</аіу> 
<р с1аѕ5="соругідћїі">Соругідћі ® 2009 М3С</р> 
</4іу> 


Для преобразования этого кода в семантический НТМТ.5 надо, на мой взгляд, 
внести следующую правку. 


1. Вместо самого внешнего контейнера <0іу 1й="пЗс_ Ғооёег"> использовать тег 
<Ғооїег> 
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2. 


Первые два тега <діу сТа$$="мЗс_Тоофег-пау"> заменить тегом <пау>, а третий — 
<ѕесілоп> 

Вместо заголовков <ћ3> применить <ћ1>, потому что каждый из них теперь на- 
ходится внутри раздела (узел в кратком содержании документа создает как 
<агііс1е>, так и <пау>: см. раздел «Рубрикация» этой главы). 


Итоговый вариант разметки нижнего колонтитула мог бы быть таким: 


<Гоофег> 


<пау> 
<Һ1>Навигация</һћ1> 
<и1> 
<11><а һге?="/">Главная страница</а></11> 
<11><а һге?=" /ѕЕапдагаѕ/">Стандарты</а></11> 
<11><а һге?=" /рагіісірате/ ">Участие</а></11> 
<11><а һге?=" /Сопѕогїіит/тетрегѕћір">Членство</а></11> 
<11><а һге?=" /Сопѕогїлит/">0 Консорциуме</а></11> 
</и]> 
</па\у> 
<пау> 
<Һ1>Связь с МЗС</һ1> 
<и1> 
<11><а һге?=" /Сопѕогііит/сопбасі">Связаться</а></11> 
<11><а һғе?=" /Не1р/">Справка и ЧаВо</а></11> 
<11><а Иге{=" /СопѕогЕіит/ ѕир">Финансовая помощь</а></11> 
<11><а һге?=" /Сопѕогїлит/ѕ1Ееіпаех">Карта сайта</а></11> 
</и]> 
</пам> 
<ѕесііоп> 
<Һ1>Новости М3С</һ1> 
<и1> 
<11><а һге?=" Пер: //бм бег. сот/АЗС">Мы в Тм ег</а></11> 
<11><а Игет=" р: //14ей1 .са/мЗс">Мы в Іаепіі .са</а></11> 
</и1> 
</зес{1оп> 
<р сТа$$="соруг19й">Соруг1а9й ® 2009 МЗС</р> 


</Тоофег> 


Для дальнейшего изучения 


Используемые в этой главе страницы-образцы: 


Ө! 
Ө! 


исходная (в разметке НТМТ. 4): ћќр://аімеіпіоћёті5.огд/ехатріеѕ/біод-огідіпа!.Һті; 
измененная (в НТМІ.5-разметке): Һр://аімеіпёоћті5.ого/ехатріеѕ/Ыіод-һті5.Һті. 
Подробнее о кодировках символов 


«Абсолютный минимум того, что каждый без исключения программист обязан 
знать о Опісое и кодовых таблицах» (Һір://амлу.јоеіопѕоћмаге.согт/агісіеѕ/Опісоде. 
Вт!) — статья Джоэля Спольского (]ое! ЅроЇѕКку); 
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О «О ценности Ошсо4е» (Ћі&р://лмму.гау.ого/опдоіпо/\\һеп/200х/2003/04/06/0пісоде), 
«О символьных строках» (ћр://мм.Үргау.огд/опдоіпо/\һеп/200х/2003/04/13/ 
бігіпдѕ), «Символы и байты» (Һір://ммуү.гау.ога/опдоіпо/\\һеп/200х/2003/04/26/ 
ОТЕ) — статьи Тима Брея (Тіт Вгау). 

Подробнее о том, как заставить работать НТМТ.5-теги в Ірќегпеє ЕхрІогег: 


О «Применение стилей к элементам, с которыми не знаком ТЕ» (ћр://хориѕ. 
сот/еуріод/2008/5(уІе-ипкпомп-еіетепёѕ.Һті) — статья Съерда Вишера (З]оег4 
Уіѕѕсһег); 

о НТМІ5 ѕһіу (Һр://ејоһп.огд/Ыод/һті5-5һім/) — проект Джона Ресига (]оБп 
КБез15); 

О сценарий, включающий поддержку НТМТ. (ћір://гетуѕһћагр.сот/2009/01/07/ 
һті5-епабііпо-ѕсгір{/), — разработка Реми Шарпа (Кету Ѕћагр). 

Подробнее о стандартном режиме и ОТД: «ОТД и переключение режимов бра- 
узера» (Һр://һѕімопеп.ікі.й/аосуре/) — статья Генри Сивонена. В данном предмете 
следует ориентироваться только на сведения этой статьи. Остальные публикации 
родственной тематики либо неточны, либо неполны, либо устарели. 

Валидатор (Х)НТМТ.5 вы можете найти по адресу Һір://һті5.уаіідаќог.пи. 


С чистого листа 
(холста) 


Приступим 


В НТМІ5 тег <сапуа$> (Һр://Ь1у/9ЈН20#) определен как «холст для зависимой от 
разрешения растровой графики, с помощью которого могут на лету прорисовы- 
ваться диаграммы, графика игр и прочие изображения». На странице холст имеет 
вид прямоугольника, в границах которого можно рисовать с помощью ЈауаЅсгірї. 
Во время написания этой книги базовые возможности холста поддерживались 
в браузерах, перечисленных в табл. 4.1. 


Таблица 4.1. Браузеры, в которых поддерживаются возможности холста 


ТЕ* Еігеѓох Ѕағагі Сһготе Орега іРһопе Апагоіа 
7.0+ 3.0+ 3.0+ 3.0+ 10.0+ 1.0+ 1.0+ 


А 


В Пшегпеё ЕхрІогег поддержку обеспечивает сторонняя библиотека ЕхрІогегСапуаѕ. 


Как же выглядит холст? А никак, собственно. У тега <сапуаѕ> нет своего содер- 
жимого и границ. Пример его кода: 


<сапуаѕ м1аїћ= "300" һеїдћі="225"></сапуаѕ> 


Этот холст показан на рис. 4.1. Граница помечена точками, чтобы наглядно по- 
казать его положение. 

На одной странице может быть несколько тегов <сапуаѕ>. Каждому из них будет 
соответствовать ООМ-объект, и состояние разных холстов независимо. Если при- 
писать каждому из них атрибут 14, то для доступа к холстам с помощью Јауа$сгірё 
можно использовать обычный способ. 

Включим атрибут 14 в показанный выше код: 


<сапуа$ 14="а" міаїћ="300" һеідһі="225"></сапүаѕ> 
Теперь данный тег <сапуа$> легко обнаруживается в РОМ: 


уаг а сапуаѕ = доситет .деёЕ1ететВуТа("а"); 
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Рис. 4.1. Холст с границей 


Простые фигуры 


В табл. 4.2 перечислены браузеры, в которых поддерживаются простые фигуры. 


Таблица 4.2. Браузеры с поддержкой простых фигур 


ТЕ* Еігеѓох бага Сһготе Орега іРһопе Апагоіа 
7.0+ 3.0+ 3.0+ 3.0+ 10.0+ 1.0+ 1.0+ 


В Пцегпеё ЕхрІогег поддержку обеспечивает сторонняя библиотека ЕхрІогегСапуаѕ. 


По умолчанию холст пуст. Не порисовать ли нам что-нибудь на нем? Для этого 
с помощью обработчика опс1іск можно вызвать, к примеру, следующую функцию, 
которая рисует прямоугольник (интерактивный образец ее работы смотрите на 
сайте Һр://аімеіпіоћёті5.огд/сапуаѕ.Һті): 


Ғипсёіоп агам Б() { 
уаг Б сапуаѕ = аоситепі .деЕЕ1етепїВута("Ь"); 
уаг р сопёехї = Б сапуа$ .деїСопїехі ("21"); 
р сопехі.?111Кесї (50, 25, 150, 100); 


} 


Первая строка в коде этой функции просто находит тег <сапуаѕ> в ООМ. Инте- 
реснее вторая строка. У каждого холста есть «контекст рисования», в котором 
и происходят все дальнейшие операции. После того как тег <сапуаѕ> обнаружен 
в РОМ (методом оситеп .деЕЕТетепЕВу14() или каким-либо другим методом), мож- 
но вызвать его метод деїСопїехі(), которому следует передать строку "24": 


#ипсёїіоп Чгам Б() { 
уаг Б сапуаз = доситей® .деЕЕ1етепїВута("Ь"); 
уаг Б сопфехё = Ь сапуаѕ.деїСопёехї (“24”); 
р сопехі.?111Кесї (50, 25, 150, 100); 

} 
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РАЗМЕТКА В ВОПРОСАХ И ОТВЕТАХ 


Вопрос: Существует ли трехмерный холст? сования, но ни один из этих интерфейсов не стандарти- 

зован. Спецификация НТМЕ5 отмечает: «В следующей 
Ответ: Пока еще нет. Отдельные разработчики экспе- версии спецификации, вероятно, будет определен 
риментировали с собственными АР! трехмерного ри- контекст 34». 


Итак, даны тег <сапүаѕ> и его контекст рисования. В этом контексте определены 
все методы и свойства, отвечающие за рисование. Так, для черчения прямоуголь- 
ников имеется целая группа свойств и методов. 


О Свойство #1115 у1е задает С$$-цвет, узор или градиент (подробнее о гради- 
ентах — далее в этой главе). Значение 11115$у1е по умолчанию — непрозрач- 
ный черный цвет. Программист может определить какой угодно стиль за- 
ЛИВКИ. 


О Метод ?111Кесї(х, у, итаЁЙ, һетоһі) рисует прямоугольник с текущим стилем 
заливки. 


О Свойство ѕгокеЅ уе, как и #і115їу1е, может задавать С55-цвет, узор или гра- 
диент. Это стиль границ прямоугольника. 


О Метод ѕїгокеКесї (х, у, иїаёл, ћеїд9һё) рисует прямоугольник с текущим сти- 
лем границ. При вызове ѕігокеЌесї содержимое прямоугольника не заполня- 
ется. 


О Метод с1еагКесі(х, у, иїаёћ, һетдһі) очищает пикселы внутри заданного пря- 
моугольника. 


Каждый контекст рисования «помнит» определенные в нем свойства, пока стра- 
ница открыта и данные не стираются после какой-либо операции. 


РАЗМЕТКА В ВОПРОСАХ И ОТВЕТАХ 


Вопрос: Можно ли «перезагрузить» холст? а вновь присвоить ей текущее значение, например, 
так: 

Ответ: Да. Если переназначить ширину или высоту 

тега <сапуаѕ>, его содержимое будет стерто, аве “аг № сапуаз = доситепЕ. деЕТетепі- 

свойства контекста рисования примут первона- ВУІа("р"); 

чальные значения. Можно даже не менять ширину, Ё_Сапуаѕ.міаёћ = р сапуаѕ.міаёћ; 


Вернемся к коду предыдущего образца: 


уаг Б сапуаѕ = йоситепі .деЕЕТетепїВута("Ь"); 
уаг р сопёехі = р сапуаѕ.деЕСопёехі ("24"); 
Б сопѓехі.Ғ111Кес(50, 25, 150, 100); 


Вызвав метод ?і11Кесї(), мы рисуем прямоугольник и заполняем его заливкой 
текущего стиля. Поскольку значение по умолчанию не менялось, это будет черный 
цвет. Прямоугольник описывается координатами левого верхнего угла (50, 25), 
шириной (150) и высотой (100). Для лучшего усвоения этого механизма рассмотрим 
координатную систему холста. 
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Координатная сетка холста 


Холст — это двухмерная сетка, на которой координата (0, 0) присвоена левому 
верхнему углу. Значения абсцисс (х) растут слева направо, значения ординат (у) — 
сверху вниз. 

Координатная диаграмма на рис. 4.2 изображена с помощью тега <сапуаз>. В ее 
состав входят: 


множество полупрозрачных вертикальных линий; 

множество полупрозрачных горизонтальных линий; 

две черные горизонтальные линии; 

две маленькие черные диагональные линии, формирующие стрелку; 
две черные вертикальные линии; 

еще две маленькие черные диагональные линии — тоже стрелка; 
буква х; 

буква у; 

текст (0, 0) возле верхнего левого угла; 

текст (500, 375) возле нижнего правого угла; 


ооооооооооо 


точки в левом верхнем и правом нижнем углах. 


(0,0) 


у (500,375) 


Рис. 4.2. Диаграмма координат холста 


Рассмотрим, как изобразить такую составную фигуру. 
Сначала нужно задать собственно тег <сапуаѕ>. В нем будут определены ширина 
и высота прямоугольника, а также атрибут 14: 


<сапуаѕ ід="с" мідїһ= "500" һеідһі="375"></сапуаѕ> 
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Затем надо найти в ООМ тег <сапуаѕ> и получить доступ к его контексту рисо- 
вания: 


уаг с сапуаѕ = доситет .деЕЕ1етепЕВута("с") ; 
уаг сопфехё = с сапуаѕ .деЕСопіехї ("24"); 


Только после этого следует приступить к рисованию линий. 


Контуры 


В табл. 4.3 перечислены браузеры, в которых поддерживаются контуры. 


Таблица 4.3. Браузеры с поддержкой контуров 


ТЕ* Еігеѓох бага Сһготе Орега іРһопе Апагоіа 
7.0+ 3.0+ 3.0+ 3.0+ 10.0+ 1.0+ 1.0+ 


А 


В Пцегпеё ЕхрІогег поддержку обеспечивает сторонняя библиотека ЕхрІогегСапуаѕ. 


Вспомните, как выполняются чертежи тушью. В такой работе спешка вредна: 
чтобы не сделать ошибку, не чертят сразу набело, а сначала проводят прямые и кри- 
вые линии карандашом. Только когда набросок доведен до приемлемого вида, ка- 
рандашные линии прочерчиваются тушью. 

Для каждого холста определен контур. Формирование контура подобно каран- 
дашному эскизу: рисовать можно что угодно, но частью конечного продукта наш 
«эскиз» не станет до тех пор, пока мы не прорисуем его условными «чернилами». 

Рисовать прямые линии «карандашом» позволяют следующие два метода: 


О по\уеТо(х, у) передвигает «карандаш» в заданную начальную точку; 


О Т1птеТо(х, у) проводит линию до заданной конечной точки. 


При вызовах тоуеТо() и 11пеТо() от раза к разу контур все увеличивается. Эти 
методы по сути «карандашные», хотя вообще их можно называть как угодно. На хол- 
сте ничего не появится, если не вызвать один из «чернильных» методов. 

Сформируем сначала координатную сетку: 


Тог (маг х = 0.5; х < 500; х += 10) { 
сопфех® .тоуеТо(х, 0): 
сопфехё.11пеТо(х, 375); 


} 

Тог (магу = 0.5; у < 375; у += 10) { 
сопіехі .тоуеТо(0, у); 
сопёехі.1іпеТо(500, у); 


} 


До сих пор вызывались только «карандашные» методы и на самом холсте ниче- 
го не появилось. Чтобы закрепить эскиз, требуются «чернила»: 


сопіехі.ѕёгокеЅїу1е = "#еее"; 
сопіехі. ѕЕгоке() ; 


Метод Ѕігоке() — один из «чернильных» методов. Он принимает тот сложный 
контур, который программист определил с помощью птоуеТо() и 11пеТо(), и прори- 
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совывает этот контур на холсте. Цвет линий определяет свойство ѕїгокеЅїу1е. Ре- 
зультат показан на рис. 4.3. 


Рис. 4.3. Прямоугольная сетка на холсте 


РАЗМЕТКА В ВОПРОСАХ И ОТВЕТАХ 


Вопрос: Почему начальным значением для х и у выбра- сти линию единичной толщины по такому стыку, то она 
но 0,5, ане 0? захватит края прилегающих квадратов и окажется 

толщиной два пиксела. Чтобы добиться толщины 
Ответ: Представьте себе каждый отдельный пиксел как ровно 1 пиксел, надо сдвинуть координату на 0,5 
большой квадрат. Целочисленная координатная сетка в направлении, перпендикулярном направлению 
(0, 1, 2...) проходит по стыкам квадратов. Если прове- ЛИНИИ. 


Теперь изобразим горизонтальную стрелку. Все прямые и кривые участки 
одного контура изображаются одним и тем же цветом (или градиентом, очем уже 
совсем скоро пойдет речь). Но для стрелки нужен другой цвет: черный, а не 
светло-серый. Поэтому начнем новый контур: 


сопіехі.БредіпРаЁћ() ; 

сопфех® .тоуеТо(0, 40); 
сопфехе.11пеТо(240, 40 
сопіехі .тоуеТо(260, 40 
сопфехе.11пеТо(500, 40 
сопфехе .тоуеТо(495, 35 
сопфехе.11пеТо(500, 40 
сопіехі.1іпеТо(495, 45 


Аналогично создается вертикальная стрелка. Поскольку она того же цвета, что 
и горизонтальная, начинать новый контур нет необходимости. Две стрелки будут 
частями единого контура: 
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сопфехё .тоуеТо(60, 0); 
сопіехі.1іпеТо(60, 153); 
сопіехі.томеТо(60, 173); 
сопіехі.1іпеТо(60, 375); 
сопфехё .тоуеТо(65, 370); 
сопіехі.1іпеТо(60, 375); 
0( 


сопіехі.1іпеТо(55, 370); 


Как я сказал, стрелки будут черного цвета, но свойство ѕігокеЅїу1е пока еще 
определяет светло-серый цвет (при создании нового контура значения 11115%у1е 
и ѕігокеЅїу1е не возвращаются к начальным). Это не составляет проблемы, потому 
что до сих пор вызывались только «карандашные» методы. Прежде чем прорисо- 
вывать контур по-настоящему, «чернилами», зададим в свойстве ѕ1гокеЅїу1е зна- 
чение черного цвета, иначе стрелки окажутся почти невидимыми: 


сопіехі.ѕёгокеЅїу1е = "#000"; 
сопіехї.ѕёгоке() ; 


Результат можно видеть на рис. 4.4. 


У 


Рис. 4.4. Координатные оси (без ярлыков) на холсте 


Текст 


На холсте можно рисовать не только линии, но и текст (табл. 4.4). В отличие от 
окружающего текста веб-страницы, текст на холсте не подчиняется «блочной» 
модели, то есть к нему неприменимы известные технологии С$5-форматирования: 
плавающая разметка, поля, отступы и перенос по словам (это и к лучшему, как вы 
могли бы подумать). Можно установить некоторые атрибуты шрифта, после чего 
выбирается точка на холсте и прорисовывается текст. 
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Таблица 4.4. Браузеры, в которых поддерживается текст на холсте 


ТЕ* Ргегох”* бага Сһготе Орега іРһопе Апагоіа 
7.0+ 3.0+ 3.0+ 3.0+ 10.0+ 1.0+ 1.0+ 


* 


В Пцегпеё ЕхрІогег поддержку обеспечивает сторонняя библиотека ЕхрІогегСапуаѕ. 


зж 


В Мох а Еігеѓох 3.0 для обеспечения поддержки нужен пакет совместимости. 


В контексте рисования (см. раздел «Простые фигуры» этой главы) доступны 
следующие атрибуты шрифта: 
О Топ — все, что позволяет определить одноименное С55-правило: стиль, вариант, 
начертание, размер, интерлиньяж и семейство шрифтов; 


О +ехїАТідп — задает выравнивание текста, подобно С$8-правилу ех -а1ідп, но 
не точно так же; возможные значения этого свойства: ѕагі, епа, 1е?і, гідћї, 
сепїег; 
О ТехїВаѕе1іпе — определяет положение текста относительно начальной точки; 
возможные значения этого свойства: фор, һапоіпо, пе, а1рпаБеф1с, 14еодгарй1с, 
Бо фот. 


Свойство ТехїВаѕе1іпе непростое, потому что непрост и сам текст (английский 
текст, как и русский, достаточно прост, но на холст можно вывести любой символ 
Опісойе, а там простота заканчивается). Спецификация НТМТ.5 так описывает 
различные базовые линии текста": 


Верх и низ ет-квадрата — это приблизительные верхняя и нижняя границы символов шрифта. 
Строго посередине между ними проводится средняя линия. К «висячей» базовой линии при- 
крепляются такие символы, как Эт; к «алфавитной» базовой линии — такие символы, как А, 
у, Ри О; к «идеографической» базовой линии — такие символы, как ЖА и 3. По вине символов, 
далеко выходящих за границы ет-квадратов (рис. 4.5), верхний и нижний края ограничива- 
ющего блока могут находиться далеко от базовых линий. 


Висячая 


базовая линия 
Верх ет-квадрата 


Средняя линия 


Низ ет-квадрата 


Идеографическая Алфавитная 
базовая линия 


Низ ограничивающего блока 


Рис. 4.5. Базовые линии текста 


Для таких простых алфавитов, как английский и русский, можно ограничиться 
значениями фор, тіад1е и ро{фот свойства фех{Вазе11пе. 


1 ћер://ЫсЛу/ансаро. — Примеч. авт. 
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Итак, нарисуем какой-нибудь текст. Текст на холсте наследует размер шрифта 
и стиль, применяемые к самому тегу <сапуа5>, но эти значения можно переопреде- 
лить в контексте рисования с помощью свойства То: 


сопіехі. оп = "Бо1а 12рх зап$-зег1{"; 
сопёехі. #111Техі("х", 248, 43); 
сопїехі. Р111Техё("у", 58, 165); 


Прорисовка текста выполняется методом 1111Техё(): 


сопбехё.Тойф = "ро1а 12рх ѕапѕ-ѕегії"; 
сопфехЕ. #111ТехЕ(“х”, 248, 43); 
сопфехе. Ғ111Техё("у", 58, 165); 


РАЗМЕТКА В ВОПРОСАХ И ОТВЕТАХ 


Вопрос: Можно ли при рисовании текста использо- исходя из таблицы стилей. Если присвоить сопќехќ.ќопї 

вать относительный размер шрифта? относительное значение, например 1.5ет или 150%, 
то браузер умножит эту величину на размер шрифта, 

Ответ: Да. Для тега <сапуаз>, каки для любого другого вычисленный им для тега <сапуаѕ>. 

НТМІ-тега на странице, размер шрифта вычисляется 


Пусть, например, мы хотим, чтобы текст в левом верхнем углу располагался под 
линией у = 5. Из обычной программистской лености не станем мерить высоту тек- 
ста, чтобы рассчитать ординату базовой линии, а вместо этого присвоим +ехїВаѕе1 іпе 
значение фор и передадим методу-обработчику координаты левого верхнего угла 
рамки, ограничивающей текст: 


сопїехі.ёехїВаѕе1іпе = "Фор"; 
сопїехі. Р111Техі("( 0, 0)", 8, 5); 


Теперь рассмотрим текст в правом нижнем углу. Пусть, например, нам угодно, 
чтобы правый нижний угол области, занятой этим текстом, имел координаты 
(492, 370), то есть располагался всего в нескольких пикселах от правого нижнего 
угла холста. Опять же мы не будем измерять ширину и высоту текста. Достаточ- 
но установить їехїіА1ідп равным гідћї и їехїВаѕе1іпе равным боїїоп, а затем вы- 
звать 1111Техё(), передав ему координаты правого нижнего угла рамки, ограни- 
чивающей текст: 


сопёехї.бехіА1ідп = "гта"; 
сопіехї .сехіВаѕе1іпе = "роффот"; 
сопіехі.#і11Техі("( 500 , 375 )", 492, 370); 


Результат этих манипуляций показан на рис. 4.6. 

Как жемы забыли о точках по углам? Рисование кругов будет рассмотрено чуть 
позже, а пока что мы схитрим и изобразим точки в виде прямоугольников (см. раз- 
дел «Простые фигуры» этой главы): 


сопїехі.#і11Кесі(0, 0, 3, 3); 
сопїехі.#і11Аесі (497, 372, 3, 3); 
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Вот и все! Итог наших операций показан на рис. 4.7. 


Рис. 4.7. Диаграмма координат холста, созданная с помощью холста 
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(0,0) 


У 


(500,375) 


Рис. 4.6. Координатные оси сярлыками на холсте 


(0,0) 


У 


(500,375) 


В табл. 4.5 перечислены браузеры, в которых поддерживаются градиенты. 


Таблица 4.5. Браузеры с поддержкой градиентов 


енты 


ТЕ* Риегох |Ѕаѓғагї | Сһһоте Орега їЇРһопе | Апагоіа 
Линейные гради- 7.0- |3.0+ 3.0+ 3.0+ 10.0+ 1.0+ 1.0+ 
енты 
Радиальные гради- |- 3.0+ 3.0+ 3.0+ 10.0+ 1.0+ 1.0+ 


В Пшегпеё ЕхрІогег поддержку обеспечивает сторонняя библиотека ЕхрІогегСапуаѕ. 
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В этой главе вы сначала научились рисовать прямоугольники с непрозрачной 
цветовой заливкой (см. раздел «Простые фигуры» этой главы), а потом линии — тоже 
непрозрачным цветом (см. раздел «Контуры» этой главы). Но для фигур и линий 
пригодны не только сплошные цвета. Существует градиентная заливка, позволя- 
ющая добиваться замечательного внешнего эффекта. Примером послужит рис. 4.8. 

Этот холст верстается, как и всякий другой: 


<сапуаѕ іа="а" мтаи="300" һеідһі="225"></сапүаѕ> 


Сценарий должен сначала обнаружить тег <сапуаз> и получить доступ к его кон- 
тексту рисования: 


уаг а сапуаз = доситепЕ .одеЕТетепЕВутас "а" ) ; 
уаг сопфехё = а сапуа$ .деЕСопіехї ("24") ; 


Рис. 4.8. Линейный градиент в направлении слева направо 


Войдя в контекст рисования, мы можем начать задавать градиент. Градиентом 
называется плавный переход между двумя или несколькими цветами. Контекст 
рисования НТМІ.5-холста поддерживает два типа градиентов. 


О сгеаїеі іпеагбгадтеп (х0, уй, х1, у1) — направляет заливку вдоль отрезка из 
точки (х0, у0) вточку (х1, У1). 


О сгеаїеКааіа1бгадіеп(х0, уй, го, х1, УТ, г1) — направляет заливку вдоль кону- 
са, образуемого двумя окружностями. Начальные три параметра описывают 
первую окружность с центром (х0, у0) и радиусом г0. Конечные три параметра 
описывают вторую окружность: центр (х1, у1) и радиус 7]. 


Создадим линейный градиент. Градиенты бывают любых размеров; наш будет 
шириной 300 пикселов, как и весь холст: 


уаг ту дгадіепї = сопёехі. сгеаёеі іпеагбгадіепе(0, 0, 300, 0); 


Поскольку значения ординат (второй и четвертый параметры) равны 0, эта гра- 
диентная заливка будет равномерным переходом от одного цвета к другому в на- 
правлении слева направо. 

Имея объект-градиент, можно задать его цвета. Линейный градиент должен 
иметь две или несколько цветовых точек, расположенных в любых местах на его 
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протяжении. Чтобы добавить цветовую точку, укажите ее позицию на градиенте, 
пользуясь числами из интервала от 0 до 1. 
Зададим плавное «выцветание» из черного цвета в белый: 


ту одгадїіепі .аЧЧСоТог$ор(0, "БТаск"); 
ту огааіепі.аддсоТог5&ор(1, "мй1е"); 


На холсте ничего не изображено, хотя градиентная заливка уже определена: это 
пока лишь объект в памяти. Чтобы нарисовать градиент, присвойте #1115 у1е соот- 
ветствующее значение и нарисуйте фигуру, например прямоугольник: 


сопїехі.Рі1151уТе = ту дгад1ет*; 
сопёехі.?111Кесї(0, 0, 300, 225); 


Результат будет таким же, как на рис. 4.8. 

А если бы вы захотели создать градиентную заливку с переходом от одного цве- 
та к другому в направлении сверху вниз? Тогда постоянными должны быть значе- 
ния абсцисс (первый и третий параметры), а значения ординат должны ограничи- 
вать диапазон от 0 до высоты холста: 


уаг ту дгадіепї = сопбехё . сгеабе іпеагбгадіепЕ(0, 0, 0, 225); 
ту одгадїіепї . ааасоТогЅёор(0, "БТаск"); 

ту огааіепі.адасоТог5&ор(1, "мћіїёе"); 

сопіехї.?11151уТе = ту огадіепі; 

сопїехі.?і1ТКесі(0, 0, 300, 225); 


Результат показан на рис. 4.9. 
Можно также прорисовать градиент вдоль диагонали, например: 


уаг ту дгадіепї = сопбехё . сгеабе іпеагбгадіепЕ(0, 0, 300, 225); 
ту одгадїепї . ааасоТогЅёор(0, "БТаск"); 

ту огааіепі.аддсоТог5&ор(1, "мћіїе"); 

сопіехї.?11151уТе = ту огадіепі; 

сопїехі.?і1ТКесі(0, 0, 300, 225); 


Результат показан на рис. 4.10. 


Рис. 4.9. Линейный градиент Рис. 4.10. Диагональный 
в направлении сверху вниз линейный градиент 
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Изображения 


В табл. 4.6 перечислены браузеры с поддержкой изображений на холсте. 


Таблица 4.6. Браузеры, в которых поддерживаются картинки на холсте 


ТЕ* Ғігеѓох бага Сһготе Орега їЇРһопе Апагоіа 
7.0+ 3.0+ 3.0+ 3.0+ 10.0+ 1.0+ 1.0+ 


А 


В Пцегпеё ЕхрІогег поддержку обеспечивает сторонняя библиотека Ехр|огегСапуа$. 


На рис. 4.11 показан кот, отображаемый с помощью тега <іто>. 
На рис. 4.12 показан тот же самый кот, нарисованный на НТМТ5-холсте. 


Рис. 4.11. Кот в теге <іто> Рис. 4.12. Кот в теге <сапуа$> 


В контексте рисования определено несколько методов прорисовки графических 
файлов на холсте: 


О дғамІтаде(їтаде, ах, ау) — просто берет картинку и рисует ее; координаты 
(ах, ау) указывают на верхний левый угол изображения, то есть если при- 
своить им значение (0, 0), то картинка будет помещена в верхний левый угол 
холста; 


О ЧгамТтаде( ттаде, ах, ау, ам, аһ) — берет картинку, масштабирует ее по горизон- 
тали и вертикали, чтобы она соответствовала заданным ширине фм и высоте аћ, 
после чего рисует ее от точки (ах, ду); 

О ЧгамТтаде( ттаде, 5х, зу, 5и, 5й, ах, ау, ам, дһ) — берет картинку, выделяет на 
ней прямоугольник (5х, 5у, 5и, $1), масштабирует его до размеров (ам, 0!) 
и рисует от точки (ах, ду). 


Параметры метода ЧгамИтаде() так объяснены в спецификации НТМТ.5 (НЕр:// 
Ыіє.1у/9М/Т2Ар): 


Начальный (ѕоигсе) прямоугольник — это прямоугольная область [на исходной картинке], углы 
которой имеют координаты (5х, $у), (5х-+5№, °у), (5х+5%, ѕу+Ѕһ), (5х, зу-+$1). 

Конечный (дезЧпаНоп) прямоугольник — это прямоугольная область [на холсте], углы которой 
имеют координаты (ах, ау), (ах+ами, ау), (ах+ами, ау+аһ), (ах, ау+аһ). 


Наглядно эти параметры показаны на рис. 4.13. 

Чтобы нарисовать картинку на холсте, нужна собственно картинка, которая была 
бы размещена в существующем теге <іто> или представлена ЈауаЅсгірі-объектом 
Ітаде. Во всяком случае, прежде чем переходить к рисованию, убедитесь, что картин- 
ка полностью загрузилась. 
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Исходное изображение 
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Рис. 4.13. Метод агамЛтаде() переносит изображение на холст 


При использовании тега <іто> прорисовку на холсте можно вызывать событием 
\міпаом.опТоаа: 


<іто 19=”саф” ѕгс="ітадеѕ/саї.рпод" а1і="спящий котик" міаёһћ="177" һеідһї="113"> 
<сапуаѕ ід="е" міаёћ="177" һеїідһі="113"></сапүаѕ> 
<Ѕсгірі> 
міпаом.оп1оаа = Ғипсёіоп() { 
уаг сапуа$ = аоситепі .деЕТетепВуІа( "е" ) ; 
уаг сопіехі = сапуаѕ .деїСопёехї ("21"); 
уаг саф = аоситепі .деЕТетепЕВуІа("саї") ; 
сопфех* . Чгам1таде (са%, 0, 0); 


</ѕсгірі> 


Если же вы работаете с картинкой — объектом Јауа$сгірѓ, то уместно будет вы- 
зывать прорисовку по наступлении события Ітаде .оп1оаӣ: 


<сапуаѕ ід="е" міаёћ="177" һеїідһі="113"></сапүаѕ> 
<Ѕсгірі> 

уаг сапуаѕ = аоситепї .деёЕТетепіВуІа("е") ; 

үаг сопЁехї = сапуаѕ .деіСопіехі ("24") ; 

үаг саї = пем Ітаде(); 
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саї.ѕгс = "1тадез$/са®.рид"; 
саї.оп1оаа = #ипсііоп() { 
сопфехё .агамІтаде(са, 0, 0); 


</ѕсгірі> 

Необязательные третий и четвертый параметры метода ЧгамПтаде() отвечают за 
масштабирование картинки. На рис. 4.14 показано то же самое изображение кота, 
уменьшенное вдвое по ширине и высоте и отрисованное от разных точек единого 
холста. 


Рис. 4.14. Много котиков! 


Вот сценарий, с помощью которого создан эффект «многокотья»: 


саї.оп1оаа = #ипсііоп() { 
Тог (маг х = 0, у = 0; 
х < 500 &8& у < 375; 
х += 50, у += 37) { 
сопёехі.ӢгамІтаде(саї, х, у, 88, 56); 
} 
}; 

После всех этих операций встает закономерный вопрос: зачем вообще рисовать 
картинки на холсте? Достигаем ли мы (ценой дополнительной сложности) хоть 
каких-нибудь преимуществ по сравнению с <іпо> и некоторыми С$5$-правилами? 
Ведь даже замечательное «многокотье» можно создать 10 перекрывающимися те- 
гами <1іто>. 

Зачем, говорите вы? Затем же, зачем нужна возможность рисования текста 
(см. раздел «Текст» этой главы). В состав диаграммы координат холста (см. раз- 
дел «Координатная сетка холста» этой главы) входили текст, линии и фигуры: ри- 
сованный текст выступил здесь как часть составной графической работы. Легко 
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представить себе на более сложных диаграммах значки, спрайты и другие графиче- 
ские детали, отрисованные с помощью йгамІтаде( ). 


А что в ІЕ? 


Тпсегпеё ЕхрІогег до версии 8 включительно (она была последней стабильной на 
момент написания этой книги) не поддерживает АРІ рисования. ІЕ, однако, под- 
держивает проприетарную технологию МісгоѕоЌ под названием УМІ., которая 
обладает значительной долей функциональности тега <сапуаѕ>. Так появился сце- 
нарий ехсапуа$. ]ѕ. 

ЕхрІогегСапуаѕ (Һір://сойе.доодіе.сот/р/ехріогегсапуаѕ/), или ехсапуаѕ. јѕ, — это 
ЈауаЅсгірі-библиотека с открытым исходным кодом, распространяемая под лицен- 
зией Арасће. В ней реализован АРІ рисования для Пиегпеё Ехр|огег, воспользо- 
ваться которым можно, следующим образом добавив в верхнюю часть страницы 
тег <5ср1рї>: 
<1рОСТҮРЕ ћїіт1> 
<«ћїт1> 

<ћеай> 
<тефа сһагѕеё="иЕғ-8"> 
<іііЛе>Название моей страницы</1Те> 


<1--[1? ТЕ]> 
<Ѕсгірі згс=”ехсапуа$. ј5”></5сгірї> 
<1[епаї#]1- -> 
</һеад> 
<роду> 
</роду> 
</пт1> 


Строки <!--Гі? ТЕ]> и <![епд11]--> обрамляют условный комментарий, в ко- 
тором Іһѓегпеї Ехрогег видит утверждение: «Если текущий браузер — Ірѓегпеѓ 
Ехр/огег какой угодно версии, то исполнить следующий код». Все остальные 
браузеры обращаются с условным комментарием, как и с любым другим НТМТ- 
комментарием. В результате п\егпеё Ехрогег загрузит и исполнит сценарий 
ехсапуаз . ј5, тогда как другой браузер совершенно проигнорирует его (не загрузит 
и не исполнит). Это ускоряет загрузку страницы в браузерах со встроенной под- 
держкой АРТ рисования. 

После того как вы поместите сценарий ехсапуа$ . јѕ в контейнер <һеаф>, больше 
никаких мер по обеспечению совместимости с Пуегпе& ЕхрІогег не требуется. Теги 
<сапуа$> теперь можно добавлять в код страниц или создавать динамически, с по- 
мощью ]ауазсг!ре. Следуя рекомендациям этой главы, вы сможете входить в кон- 
текст рисования и рисовать фигуры, линии, градиенты, текст. 

Однако не все так просто. Известно несколько ограничений ехсапуа5. јѕ. 


О Градиенты (см. раздел «Градиенты» этой главы) могут быть только линейными. 
Радиальные градиенты не поддерживаются. 


О Узор должен повторяться в обоих направлениях. 
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О Не поддерживается отрисовка фрагмента картинки. 


О Масштабирование не является единообразным, из-за чего линии масштабиру- 
ются неправильно. 


О Замедляется работа. Это, конечно, не должно удивлять читателя хотя бы потому, 
что ЈауаЅсгірё-парсер у Пщегпеё Ехр|огег медленнее, чем у конкурентов. ГЕ может 
совершенно увязнуть в обработке такой задачи, как рисование сложных форм 
с помощью ЈауаЅсгірі-библиотеки, которая пересылает команды постороннему 
механизму. В простых случаях с несколькими линиями и картинками произво- 
дительность системы почти не упадет, но если вы будете анимировать картинки 
на холсте и т. п., то сразу почувствуете разницу. 


При использовании ехсапуа$ . јѕ нужно помнить еще об одной проблеме, с кото- 
рой я столкнулся при разработке иллюстративного материала этой главы. Если 
веб-мастер поместит сценарий ехсапуа$ . јѕ на НТМТ-страницу, то ЕхрогегСапуа$ 
будет инициализировать свой интерфейс, но это, однако, не значит, что Гаѓегпе 
Ехр|огег окажется готов к его немедленному использованию. Иногда бывает так, 
что «лжехолст» (Ѓаих-сапуаѕ) почти подготовлен к работе, но не до конца. Верный 
симптом этого состояния — когда при любой операции с тегом <сапуа$>, например 
при попытке войти в его контекст рисования, Гпбегпе Ехр|огег жалуется: «Объект 
не поддерживает это свойство (или этот метод)». 

Проще всего во избежание неполадок отложить манипуляции с холстом на вре- 
мя после события оп1оаа. Если на странице много картинок или видеоклипов, при- 
дется подождать: ведь событие оп1оаа отмечает момент полной загрузки содержи- 
мого, зато ЕхрІогегСапуаѕ успеет ввести в бой все свои резервы. 


Живой пример 


«Уголки» (Напа) — это старинная настольная игра, существующая во множестве 
вариантов. Для этого раздела я написал пасьянсный (для одного игрока) вариант 
уголков с девятью фишками на доске 9 х 9. В начале игры фишки образуют квадрат 
Зх Зв левом нижнем углу доски. Цель игры — в наименьшее возможное количество 
ходов передвинуть фишки так, чтобы они образовали квадрат 3 х 3 в правом верх- 
нем углу доски. 

При игре в «Уголки» разрешены два типа ходов. 


О Взяв фишку, передвинуть ее на любое прилегающее пустое поле. Пустым на- 
зывается поле доски, на котором в данный момент нет фишки. Прилегающим 
считается каждое из тех восьми, которыми непосредственно окружено место 
нынешнего расположения передвигаемой фишки (противоположные края до- 
ски не сомкнуты, поэтому фишка на первой вертикали не может двигаться на- 
лево: на «запад», «северо-запад» и «юго-запад»; точно так же фишка на первой 
горизонтали не может двигаться вниз: на «юг», «юго-запад» и «юго-восток»). 


О Взяв фишку, перенести ее через одну или несколько прилегающих фишек. При 
переносе поверх непустого прилегающего поля перемещение фишки далее, по- 
верх непустых полей, соседствующих с данным, или через них, не считается за 
отдельный ход, то есть фактически любая непрерывная последовательность 
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переносов — это один ход. Поскольку цель игры втом, чтобы свести количество 
ходов к минимуму, хорошие игроки строят длинные цепи фишек, поверх кото- 
рых затем можно систематически переносить другие фишки. 


Скриншот игры показан на рис. 4.15. Можете поиграть в описываемый здесь 
вариант уголков (Һ&р://аімеіпіоћті5.огд/ехатріеѕ/сапуаѕ-һаіта.һёті) и заглянуть 
в код страницы. 

«Как же все это работает?» — спросите вы, и очень кстати. Я не буду полностью 
приводить здесь код основного сценария игры (см. ћ&р://аімеіпіоћіті5.огд/ехатріеѕ/ 
һаіта.јѕ). Пропуская большинство функций, отвечающих собственно за игровую 
часть, я обращу внимание лишь на некоторые фрагменты кода, которые касаются 
прорисовки на холсте и обработки щелчков кнопкой мыши на теге <сапуа$>. 


Рис. 4.15. Начальная позиция в игре «Уголки» 


Во время загрузки страницы мы инициализируем игру: устанавливаем размеры 
холста и сохраняем в переменной ссылку на его контекст рисования: 
одСапуаѕЕТетепЕ .міаёћ = КРӯіхе1Аіаёћ; 


одСсапуаѕЕТетепЕ .петой® = КР1іхе1Неіоћі; 
дргаміпоСопёехі = дСапуаѕЕТетепї . деЕСопёехі ("24"); 
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Затем мы делаем нечто совершенно новое, не показанное ранее: добавляем 
к тегу <сапуа$> «слушатель событий», который будет реагировать на щелчки кноп- 
кой мыши: 


одСапуаѕЕТетепЕ . аддЕмепЕі іѕёепег (“с1іск”, һа1табис1 іск. Ға1ѕе) ; 


Таким образом, функция һа1та0пС1іск() вызывается каждый раз, когда указа- 
тель мыши находится где-либо на холсте, а пользователь щелкает кнопкой мыши, 
Ей передается аргумент — объект МоџѕеЕхепї с данными о положении указателя 
в момент щелчка: 


Типс Той һа1та0иС1іск (е) { 
уаг се11 = деСигзогРо$11оп(е); 
// фпе геѕі оф 111$ 15 јиѕї датерТау 1091с 
Тог (маг і = 0; 1 < оМитРіесеѕ; 1++) { 

17 ((9Р1есеѕ[11. гом == се]].гом) 8& 
(9Ріесеѕ[1].соТит == се11.со1итп)) { 
с1іскОпРіесе(1); 
гебигп; 

} 

} 
сТ1скОпЕтрфуСе1 1 (се11); 
} 


На следующем шаге нужно взять объект МоиѕеЕхепї и по его данным рассчитать, 
на какое из полей игровой доски пришелся щелчок. Доска занимает весь холст, 
поэтому любой щелчок падает на одно из ее полей. Остается только узнать, какое 
именно это поле. Задача не из легких, ведь в различных браузерах «события мыши» 
реализованы по-разному: 


Типс Лой деїСигѕогРоѕііоп(е) { 

уаг х; 

уаг у; 

1Е (е.радех || е.радеу) { 
х =е. радех; 
у = е.радеу; 

} 

е1ѕе { 
х = е.с1іепіХ + доситепі. Боду. зсго1 11е? + 
дӢоситепё . аоситепЕЕ1етепё . ѕсго11іе?Е; 
у = е.с11їепіў + доситепі. Боду. ѕсго11Тор + 
дӢоситепЕ . аоситепЕЕТетепё . ѕсго11Тор; 


На данном этапе мы имеем координаты хи у, описывающие относительное по- 
ложение указателя в документе, то есть на всей НТМІ -странице. Чтобы превратить 
их в координаты на холсте, сделаем следующее: 


х -= дСапуа$ЕТетейф .отРзе ет; 
у -= 9Сапуа$ЕТетепт® .оРРзефТор; 
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Теперь у нас есть координаты хи у, отсчитываемые в пикселах от угла холста 
(см. раздел «Координатная сетка холста» этой главы). Например, если х и у сейчас 
равны 0, то мы понимаем, что пользователь щелкнул на крайнем левом верхнем 
пикселе холста. 

Рассчитаем наконец, на какое из полей игровой доски пришелся щелчок, чтобы 
далее система действовала по обстоятельствам: 


уаг се11 = пем Се11 (Мати. ҒТоог(у/КРіеседтаёћ), 
Маі. #Тоог(х/КРіесеНеіоћі) ) ; 
гефиги се11; 


} 


Да, в «событиях мыши» разобраться непросто. Но ту же самую логику и, в сущ- 
ности, тот же самый код вы можете применять во всех своих веб-приложениях 
на основе холста. Запомните: щелчок кнопкой мыши — координаты относитель- 
но документа —> координаты относительно холста —» внутренняя логика про- 
граммы. 

Сейчас посмотрим на основную графическую процедуру. Поскольку графика 
игры очень проста, я счел возможным при любом изменении на доске очищать 
холст и перерисовывать его содержимое. Вообще говоря, необходимости в этом 
нет: контекст рисования хранит текущие данные даже в том случае, если пользо- 
ватель прокручивает страницу до полного исчезновения холста из виду или пере- 
ходит к другим вкладкам (и затем возвращается). В веб-приложениях на основе 
холста, имеющих более сложную графику (таких как игры-аркады), приходится 
оптимизировать прорисовку: следить за тем, какие области холста «загрязни- 
лись», и перерисовывать только их. Решение подобных задач выходит за пределы 
данной книги. 

Вот код, очищающий доску: 


дргаміпоСопіехі.с1еагКесі(0, 0, КРіхеТМтаєћ, КрРіхе1Нетоћї) ; 


Последовательность команд, отвечающих за прорисовку доски, должна пока- 
заться вам знакомой: схожим образом мы рисовали координатную диаграмму хол- 
ста (см. раздел «Координатная сетка холста» этой главы): 


дргаміпоСопіехі .редіпРаїћ() ; 

/* намечаем вертикальные линии */ 

Тог (уагх = 0; х <= КРіхе1ніаїћ; х += кРлесемтаеи) { 
РгаміпоСопехі .момеТо(0.5 + х, 0); 

90гамтиаСопфех® .11пеТо(0.5 + х, КРіхе1Незоћі) ; 


се} 


/* намечаем горизонтальные линии */ 

Тог (маг у = 0; у <= КРіхе1Неідћі; у += КРіесеНеідћі) { 
дргаміпоСопехі .томеТо(0, 0.5 + у); 

дргаміпоСопехі .1іпеТо(КРіхе1иіаёћ, 0.5 + у); 


/* рисуем! */ 
дргаміпоСопіехі . ѕёгокеЅїу1е = "#ссс"; 
дргаміпоСопіехі. ѕЕгоке() ; 
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По-настоящему интересно станет, когда мы начнем прорисовывать каждую от- 
дельную фишку. Фишки круглые, а мы до сих пор не рисовали окружностей. Кро- 
ме того, если пользователь выбирает фишку перед тем, как совершить ею ход, надо 
отображать такую фишку как круг с заливкой. Далее аргумент р обозначает фишку 
(ріесе) со свойствами гом и соТити, описывающими текущее положение фишки 
на доске. Внутренние константы игры, то есть номера горизонталей и вертикалей, 
мы будем преобразовывать в относительные координаты на холсте (х, у), затем 
будем рисовать окружность и, наконец, если фишка выбрана пользователем, будем 
заливать круг непрозрачным цветом: 


Ғипсііоп агамРіесе(р, ѕе1есїеа) { 
уаг со1итп = р.соТїити; 
уаг гом = р. гом; 
уаг х = (соТитп * КРїеселіаћ) + (КРіеседтаћ/2); 
уаг у = (гом * КРіесеНеіоћі) + (КРіесеНетоћі/2); 
уаг гад1іиѕ = (КР1іесед1аїћ/2) - (КРіесейіаћ/10); 


Специфическая для игры логика на этом заканчивается. Теперь в нашем рас- 
поряжении пара координат (х, у) на холсте, обозначающая центр окружности, 
которую мы хотим провести. В АРІ рисования нет метода сігс1е(), но есть метод 
агс(). Вы еще не забыли школьную геометрию? Окружность — не что иное, как 
замкнутая на себе дуга постоянной кривизны. Метод агс() принимает в качестве 
аргументов координаты (х, у) центра кривизны, величину радиуса, начальный 
и конечный углы (в радианах), а также указатель направления (Ға15е — по часовой 
стрелке, {гие — против часовой стрелки). Для расчета значения в радианах вос- 
пользуемся встроенным ЈауаЅсгірі-модулем Ман: 


дргаміпоСопіехі .редіпРаЁћ() ; 
дргаміпоСопехі.агс(х, у, гааіиѕ, 0, МаЕћ.РІ * 2, Та|5е); 
дргаміпоСопЕехї .сТоѕеРаїћ(); 


Но погодите: на холсте еще ничего не появилось. Метод агс(), подобно тоуетТо() 
и 1іпеТо(), «карандашный» (см. раздел «Контуры» этой главы). Для настоящей 
прорисовки окружности надо выбрать желаемый ѕігокеЅіу1е и вызвать ѕёгоке(): 


дргаміпоСопіехіЕ . ѕёгокеЅїёу1е = "#000"; 
дргаміпоСопіехі. ѕЕгоке() ; 


А если фишка выбрана? Используем тот же контур окружности, но на этот раз 
зальем круг непрозрачным цветом: 


ЇР (ѕе1есёеа) { 
дргаміпоСопіехё. #1115%У1е = "#000"; 
дргаміпоСопіехі. #1110) ; 


} 


Вот и... нет, не все, но почти все. Остальная часть сценария — функции, специ- 
фические для игры в «Уголки». Они определяют, допустим ли тот или иной ход, 
следят за количеством совершенных ходов и отмечают момент завершения игры. 
Вот так из девяти кругов, нескольких отрезков, обработчика опс1іск и НТМІ5- 
холста у нас получилась вполне занимательная игра. 
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Для дальнейшего изучения 


О Пособие по использованию холста (Пре: //демеорег.тогИа.огд/еп/Сапуаз иона!) 
на сайте Центра Мо7Ша для веб-разработчиков. 


О «Холст в НТМТ.5: основы» (ћіёр://аеу.орега.сот/агїісіеѕ/міем/һті-5-сапуаѕ-һе- 
раѕісѕ/) — статья Михая Сукана (М Ша! Ѕисап). 


О Образцы применения НТМТ-тега <сапуаѕ>, инструменты и руководства (НЁр:// 
млиим/.сапуазаето$.сог). 


О Тег <сапуаз> (Һр://ЬЄ.1у/9ЈН20Р) в черновике стандарта НТМІ5. 


Видео 
в Сети! 


Приступим 


Любой человек, которому за последние четыре года хотя бы раз довелось посетить 
ҮоиТибе.сот, знает, что на веб-страницах можно размещать видеоклипы. Но до по- 
явления НТМТ.5 стандартизованного способа делать это не существовало. Едва ли 
не все видео, которое вам когда-либо приходилось видеть в Сети, достигало ваших 
глаз через сторонние приложения: ОшсКТипе, Кеа!Р1ауег или Е1аѕћ (на ҮоиТиђе, 
в частности, применяется Е1аѕћ). Такие приложения достаточно тесно интегриро- 
ваны с браузером, так что пользователь может даже не сознавать, что пользуется 
ими. Попробуйте открыть веб-видео на платформе, не поддерживающей нужное 
приложение, чтобы понять реальное положение вещей. 

НТМІ5 определяет стандартный способ встраивания видео на веб-страницы — тег 
<\14е0>. Поддержку тега <\14е0> в браузерах до сих пор улучшают, то есть, если гово- 
рить более прямо, он пока не работает или, во всяком случае, работает не везде. Од- 
нако не отчаивайтесь: есть множество альтернатив и компромиссных вариантов. 

В табл. 5.1 показано, в каких браузерах на момент написания книги имелась 
поддержка тега <уійео>. 


Таблица 5.1. Поддержка тега <м4ео> 
ІЕ9 |1Е8 |1Е7 |Ғігеѓох 3.5 |Еігеѓох 3.0 |Ѕаѓғагі 4 |бЅағагї 3З |Сһоте |Орега 


Поддержка тега </14е0> — только часть вопроса. Прежде чем говорить об НТМТ.- 
видео, надо усвоить некоторые общие сведения о видеофайлах (если в этой области 
вы достаточно подготовлены, переходите сразу к разделу «Что работает в Интерне- 
те?» этой главы). 


Видеоконтейнеры 


Говоря о видеофайлах, часто упоминают АУІ-файлы, МР4-файлы и т. п. На самом 
же деле АУТ и МРА — это лишь форматы контейнеров. Как в 21Р-файле может 


' В этой главе мы используем слово «контейнер» только в значении «видеоконтейнер». 
В остальных главах оно может употребляться как равнозначное с терминами «элемент» 
и «тег». — Примеч. перев. 
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помещаться информация любого рода, так и в мультимедийном контейнере опре- 
делен только способ хранения содержимого, а не тип этого содержимого (вообще- 
то ситуация чуть сложнее: совместимы между собой не все видеопотоки и форма- 
ты контейнеров, но пока это неважно). 

Видеофайл обычно содержит не менее двух дорожек: видеодорожку (без звука) 
и одну или несколько аудиодорожек (без картинки). Дорожки, как правило, взаи- 
мосвязаны посредством маркеров в аудиоданных; с их помощью достигается со- 
гласованность звукового ряда со зрительным. Отдельные дорожки могут быть осна- 
щены метаинформацией, такой как соотношение сторон кадра (в видео) или язык 
(в аудио). Метаданные целого видеофайла: название, графическая заставка, номер 
эпизода телесериала и т. д. — тоже могут присутствовать в контейнере. 

Есть немало форматов видеоконтейнеров. Рассмотрим некоторые из самых по- 
пулярных. 

МРЕС-4 — файлы с расширением МРА и МАУ. Контейнер МРЕС-4 основан на 
ранее разработанной АрріІе технологии контейнеров ОшсКТипе (расширение МОУ). 
Трейлеры фильмов на сайте Арріе до сих пор публикуются в этих более старых кон- 
тейнерах, а фильмы на ГГипез распространяются в МРЕС-4. 

Е1аѕһ Уійео — файлы с расширением ЕТУ. Воспроизводятся, естественно, про- 
игрывателем АдоБе Е]аѕһ. В версиях Е1аѕһ, более ранних, чем 90.60.184 (Е1аѕЬ РІауег 9 
с пакетом обновлений 3), поддерживался только этот формат контейнеров. В новых 
версиях добавилась поддержка МРЕС-4. 

Ове — файлы с расширением ОСУ. Это открытый стандарт, не ограниченный 
какими-либо патентами и дружественный к ореп-зоитсе-сообществу. Встроенная 
поддержка формата контейнеров Оев, Ове-видеокодека Тћеога и аудиокодека 
УогЬіѕ имеется в Еігеѓох 3.5, Стоте 4 и Орега 10.5. Все основные дистрибутивы 
Тіпих умеют работать с Ове сразу после установки, а на десктопных платформах 
Мас и ҰУіпаоуѕ должны быть дополнительно установлены компоненты ОшсКТіте 
и фильтры ЮігесёЅһо% соответственно. Воспроизводить Ове на всех платформах 
умеет превосходный проигрыватель УТ.С (Һр://м.үійеоіап.ого/міс/). 

Ме М — файлы с расширением ҰЕВМ. Это новый формат видеоконтейне- 
ров, технически очень похожий на другой, более ранний формат под названием 
МаќгоѕКа («Матрешка»). О создании №МеЬМ было объявлено на Конференции 
разработчиков Соое 1/О 2010. Его планируется использовать исключительно 
в связке с видеокодеком УР8 и аудиокодеком Уогђіѕ (о которых подробнее чи- 
тайте далее). Встроенная поддержка МеЬМ-видео обещает быть в очередных 
версиях Сһготіит, Соо51е Сһготе, Мох Ша Еігеѓох и Орега. Компания АођБе так- 
же объявила, что следующая версия Е1аѕћ будет поддерживать формат №УеЬМ. 

Апиа Уіео Іпќегіеауе («чередование аудио и видео») — файлы с расширением 
АУТ. Формат видеоконтейнеров АУТ был разработан МісгоѕоЁ в те добрые времена, 
когда сама способность компьютера воспроизводить видео была еще в диковинку. 
В АУІ нет документированной поддержки многих функций, которые есть в более 
новых форматах контейнеров, отсутствуют какие-либо метаданные и не поддержи- 
вается (по крайней мере официально) большинство используемых в наши дни ви- 
део- и аудиокодеков. Впоследствии разные фирмы реализовывали для формата АУТ 
поддержку того или иного кодека (как правило, доработанный вариант был несо- 
вместим с прочими кодеками). По сей день для таких популярных кодировщиков, 
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как МЕпсойег (И р://ммм.трауегиа.пи/Р2ОС$/НТМЫеп/епсодтд-дие. пт), по умол- 
чанию используется АУІ-контейнер. 


Видеокодеки 


«Смотреть видео» — значит воспринимать один видеопоток и один аудиопоток, 
связанные между собой. Но для этих потоков не предусмотрено двух отдельных 
файлов, а есть один «видеофайл», например, в формате АУІ или МР4. Как вы узна- 
ли из предыдущего раздела, это всего лишь контейнеры, как формат 71Р, файлы 
которого способны содержать внутри множество разнообразных файлов. Медиа- 
контейнер определяет способ хранения видео- и аудиопотоков в едином файле. 

В товремя как пользователь «смотрит видео», его компьютер решает множество 
задач. Нужно сделать следующее. 


1. Проинтерпретировать формат контейнера, найти доступные видео- и аудио- 
дорожку, установить, как они хранятся в файле и, следовательно, в каком по- 
рядке нужно расшифровывать данные. 


2. Декодируя видеопоток, представлять его в виде последовательности картинок 
на экране. 


3. Декодируя аудиопоток, посылать необходимые звуки в динамики. 


Видеокодек — это алгоритм кодировки видеопотока, то есть механизм решения 
задачи 2 из названных выше («кодек» — сокращение от слов «кодировщик» и «деко- 
дировщик»). Видеопроигрыватель расшифровывает видеопоток с помощью кодека, 
а затем отображает последовательность картинок (кадров) на экране. Большинство 
современных кодеков умеет разными способами снизить объем информации, необ- 
ходимой для показа каждого следующего кадра. Есть, к примеру, такие, которые со- 
храняют не покадровую развертку (последовательность скриншотов), алишь отличия 
каждого следующего кадра от предыдущего. Поскольку от кадра к кадру видеоданные, 
как правило, меняются незначительно, таким способом можно достичь высокой сте- 
пени сжатия — серьезно уменьшить размер файла. 

Существует кодировка видео с потерями и без потерь. Видео, закодированное 
без потерь, занимает слишком много места и не может пригодиться в Сети, поэто- 
муя сосредоточу свое внимание на кодеках, сжимающих с потерями. Сжатие с по- 
терями означает, что при кодировке часть информации безвозвратно теряется. 
Кодировка видеоданных, как и, например, копирование аудиокассеты, влечет за 
собой потерю сведений об исходном видео и ухудшение качества. И если на аудио- 
кассете, представляющей собой копию копии, возникает фоновый шум, то много 
раз перекодированное видео может выглядеть «блочным» (разбитым на квадрати- 
ки), особенно в сценах, где много движения (так может быть и при кодировании 
качественного оригинала, если выбран плохой кодек или неправильно подобраны 
параметры). Впрочем, кодеки, сжимающие с потерями, замечательно умеют умень- 
шать объем, а некоторые даже позволяют «обмануть» человеческий глаз, отчего 
блочность, вызванная потерей информации, воспринимается не так резко. 

Существует множество видеокодеков, из которых целям нашего рассмотрения 
отвечают три: Н.264, Тћеога и УР8. 
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Н.264 


Н.264 (НЕр://ги миКреа.ога/миКИН.264) — видеокодек, известный еще как МРЕС-4 
рагі 10, МРЕС-4 АУС, или более полно — МРЕС-4 А4дуапсеа Уео Со те. Раз- 
работанный группой МРЕС, кодек Н.264 был стандартизован в 2003 году. Он при- 
зван обеспечить единый стандарт кодирования видео для маломощных устройств 
с медленным сетевым подключением (мобильных аппаратов); высокомощных 
устройств с быстрым сетевым подключением (современных десктопов) и для всех 
промежуточных типов компьютеров. С данной целью стандарт Н.264 разбит на 
«профили», в каждом из которых определен свой набор настроек; чем он сложнее 
и богаче, тем меньше будет размер закодированного файла. Надо отметить, что 
более «высокие» профили используют больше функций и поэтому демонстрируют 
лучшее качество картинки, качественнее сжимают информацию, но вместе с тем 
требуют больше времени на кодирование и больше процессорной мощности на 
декодирование в реальном времени. 

Чтобы очертить круг имеющихся профилей, скажу, что аппараты іРћһопе под- 
держивают только базовый (Ваѕеіпе) профиль, цифровой ресивер АрреТУ — ба- 
зовый и основной (Маіп), тогда как проигрыватель АдоБе Е1аѕћ на РС умеет 
воспроизводить Н.264-видео базового, основного и высокого (Ніећ) профилей. 
Сервис ҮоиТиђБе, находящийся в собственности Соов]е, применяет кодек Н.264 для 
кодирования высококачественного видео, которое затем воспроизводится с помо- 
щью Адоре Еаѕћ. Кроме того, на ҮоиТиђБе публикуется Н.264-видео для мобильных 
устройств: АрріІе іРћопе и аппаратов с операционной системой Соозе Апагола. Ко- 
дек Н.264 — один из кодеков, разрешенных спецификацией В!-гау. Диски В-гау, 
содержимое которых закодировано с помощью этого кодека, обычно используют 
высокий профиль. 

РС-несовместимые устройства, умеющие воспроизводить Н.264-видео (в том 
числе іРћопе и бытовые проигрыватели В-гау), как правило, декодируют видео- 
поток на специальном чипе, потому что их основным процессорам далеко до той 
мощности, которая нужна для расшифровки Н.264 в реальном времени. Аппарат- 
ное декодирование Н.264 поддерживают и многие видеокарты компьютеров- 
десктопов. Для кодирования видео в Н.264 предусмотрено несколько альтернатив, 
среди которых есть библиотека х264 с открытым исходным кодом. Стандарт Н.264 
защищен патентом; за выдачу лицензий на пользование им отвечает группа МРЕС 
ТА. Видеопоток Н.264 может быть вложен в большинство популярных контейне- 
ров (см. предыдущий раздел), в том числе МРА, который преимущественно ис- 
пользуется в интернет-магазине АрріІе іТипеѕ, и МКУ, большинство пользователей 
которого — энтузиасты некоммерческого видео. 


Тһеога 


Разработкой кодека Тһеога (Һр://ги.мікіредіа.ого/мікі/Тһеога), потомка технологии 
УРЗ, занимался фонд Хірһ.оге. Тһеога — это кодек, свободный от отчислений. 
Пользование им не ограничено никакими патентами, кроме исходных патентов 
на УРЗ, лицензия на которые бесплатна. В 2004 году стандарт был заморожен, но 
проект Тћеога, в состав которого входят эталонные кодировщик и декодировщик 
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с открытым исходным кодом, выпустил версию 1.0 лишь в ноябре 2008 года, а вер- 
сию 1.1 — в сентябре 2009 года. 

Видео в формате Тһеога может быть вложено в любой контейнер; чаще всего его 
можно видеть в контейнере Ове. Поддержкой ТВеога сразу после установки обла- 
дают все основные дистрибутивы Глпих. Браузер Мо”Ша Еігеѓох версии 3.5 имеет 
встроенную поддержку видео Тћеога в Оэ8-контейнере (под «встроенной» здесь 
подразумевается поддержка на всех платформах без вспомогательных программ, 
специфических для этих платформ). После установки программы-декодера Хірһ.оге 
можно воспроизводить видео Тћеога на платформах №Міріожѕ и Мас ОЗ Х. 


ҮР8 


УР8 (ћр://ги.мікіредіа.ога/мікі/МР8) — это еще один видеокодек от компании Оп2, 
разработавшей УРЗ (наследником которого является Тћеога). По качеству он со- 
поставим с Н.264 базового профиля, но обладает большим потенциалом дальней- 
шего развития. 

В 2010 году компания Соое приобрела Оп2, после чего была опубликована спе- 
цификация кодека УР8 и раскрыт код его эталонных реализаций — кодировщика 
и декодировщика. В ходе этих мероприятий были также «открыты», то есть освобож- 
дены от платного лицензирования, все патенты, ранее полученные Оп2 на УР8. 


Я 3, ПРИМЕЧАНИЕ 
г 
| 4. В случае с патентованной технологией ни на что большее надеяться нельзя, потому что ан- 


> а (9 о 
% 4. нулировать уже выданный патент невозможно. Чтобы сделать технологию «дружественной» 


к открытому исходному коду, надо ее опубликовать под бесплатной лицензией, и тогда все 
желающие смогут пользоваться ею, не отчисляя ничего в пользу держателя патента. 


Итак, по состоянию на май 2010 года УР8 — бесплатный современный кодек, не 
ограниченный никакими патентами, кроме тех, пользование которыми благодаря 
Соозе уже стало безвозмездным. 


Аудиокодеки 


Если вы не собираетесь выкладывать в Сеть только фильмы, снятые до 1927 года, 
то стоит задуматься об аудиодорожке в составе видеофайла. Аудиокодеки, как и ви- 
деокодеки, — это алгоритмы кодирования, применяемые (в данном случае) каудио- 
потокам. Естественно, имеются аудиокодеки, сжимающие данные с потерями и без 
потерь. При сжатии аудио без потерь файлы из-за своих больших размеров по- 
лучаются непригодными для публикации в Сети, поэтому я снова сконцентриру- 
юсь на кодировании с потерями. 

Аудиокодеки, сжимающие с потерями, делятся на несколько категорий. В таких 
областях, как телефония, аудиоряду не сопутствует видеоряд; в связи с этим есть 
много аудиокодеков, оптимальным образом кодирующих речь. Например, ими не- 
возможно закодировать музыку с компакт-диска: результат будет не благозвучнее, 
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чем пение четырехлетнего ребенка в мегафон. Зато они применяются в АѕѓегіѕЅк РВХ!, 
потому что трафик стоит денег, а эти специализированные кодеки сжимают чело- 
веческую речь во много раз эффективнее, чем аудиокодеки общего назначения. 
Поддержка речевых кодеков как в браузерах, так и в сторонних приложениях не 
предусмотрена; из-за этого они мало распространены в Сети. Далее я сосредоточусь 
на сжимающих с потерями аудиокодеках общего назначения. 

Как упоминалось в разделе «Видеокодеки» этой главы, при просмотре видео 
ваш компьютер одновременно выполняет несколько операций. 


1. Интерпретирует формат контейнера. 
2. Декодирует видеопоток. 
3. Декодирует аудиопоток и посылает необходимые звуки в динамики. 


Аудиокодек отвечает за решение задачи 3. Он расшифровывает аудиопоток 
и превращает его в цифровые сигналы, которые в колонках или наушниках пре- 
вращаются в звук. Как и в видеокодеках, при кодировке аудио применяются разные 
способы снижения объема информации аудиопотока. Поскольку мы говорим о сжа- 
тии с потерями, то в цикле «запись —» кодирование — декодирование —+ воспроиз- 
ведение» часть данных теряется безвозвратно. Различные кодеки отбрасывают раз- 
ные фрагменты информации, руководствуясь при этом одной задачей: «обмануть» 
уши слушателя, чтобы тот не заметил недостающего. 

Аудиоданным присуща одна черта, которой лишено видео: они могут выполнять 
дробление на каналы. Мы посылаем звук в динамики. А сколько динамиков подклю- 
чено к вашему домашнему компьютеру? Могу предположить, что их всего два: один 
слева и один справа. У моего десктопа три динамика: слева, справа и внизу (на полу). 
В системах «объемного звука» может быть шесть или даже более колонок, специаль- 
ным образом расставленных по комнате. И вот к каждой из колонок подводится один 
из каналов оригинальной записи. Идея такова: когда человек сидит посреди комнаты, 
а вокруг него из разных точек звучат шесть самостоятельных звуковых каналов, мозг 
начинает синтезировать этот звук и у слушателя возникает ощущение присутствия. 
Неужели это работает?.. Многомиллиардный рынок подсказывает нам, что да. 

Большинство аудиокодеков общего назначения поддерживает два звуковых кана- 
ла. При записи звук дробится на левый и правый каналы. Во время кодирования оба 
канала сводятся вединый поток, а при декодировании вновь разделяются и их данные 
направляются к соответствующим динамикам. Есть аудиокодеки, поддерживающие 
больше двух каналов. В них каждый канал отслеживается особо, благодаря чему про- 
игрыватель может правильно распределить каналы между колонками. 

Кажется, я говорил, что существует множество видеокодеков? Забудьте это. 
Аудиокодеков непостижимо много. В Интернете, однако, широко используются 
только три из них, о которых вам и надо знать: МРЗ, ААС, УотЫ5. 


МРЕС-1 Аиаіо Гауег З 


Кодек МРЕС-1 Аидо Гауег З (№р://ги.мікіредіа.ого/мікі/МРЗ) в обиходе известен 
как МРЗ. Если вам никогда не приходилось слышать об МРЗ, не знаю, как и быть. 


Бесплатная программа для интернет-телефонии. — Примеч. перев. 
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В любом супермаркете сейчас под именем МРЗ-проигрывателей продаются пор- 
тативные проигрыватели... Ну да ладно. 

МРЗ поддерживает двухканальный звук. Доступен различный битрейт: 64 Кбит/с, 
128 Кбит/с, 192 Кбит/с и множество других (от 32 до 320). Чем выше битрейт, тем 
больше размер файла и тем лучше качество аудио, хотя отношение качества звука 
к битрейту не линейно (при битрейте 128 Кбит/с звук более чем вдвое качественнее, 
нежели при 64 Кбит/с, но 256 Кбит/с дает менее чем двойной прирост качества по 
сравнению со 128 Кбит/с). Кроме того, формат МРЗ, стандартизованный в 1991 году, 
допускает кодирование с переменным битрейтом, при котором одни части закоди- 
рованного потока сжаты сильнее других. Так, паузу между звуками можно коди- 
ровать с очень низким битрейтом, а после паузы, когда на нескольких инструмен- 
тах будет взят сложный аккорд, битрейт подскочит. Разрешается и кодирование 
МРЗ с постоянным битрейтом. 

Стандарт МРЗ не определяет точный способ кодирования в МРЗ-формат (хотя 
определяет точный способ декодирования), поэтому разные реализации кодиров- 
щика пользуются различными психоакустическими моделями. Это создает огром- 
ный разброс результатов, но одни и те же проигрыватели умеют воспроизводить все 
полученные файлы. Лучший бесплатный МРЗ-кодировщик (а при среднем и высо- 
ком битрейте, возможно, лучший из всех) создан в открытом проекте ГАМЕ. 

Формат МРЗ защишен патентом, из-за чего «родного» декодирования МРЗ 
в дистрибутивах Глпих нет. Самостоятельные МРЗ-файлы воспроизводит в наши 
дни почти любой портативный проигрыватель, а МРЗ-аудиопоток может быть вло- 
жен в любой медиаконтейнер. АйоБе Е1аѕЬ способен воспроизводить как самостоя- 
тельные МРЗ-файлы, так и МРЗ-аудиопотоки в контейнерах МР4. 


Аауапсеа Аийіо Соаіпд 


Кодек А4уапсе Ач о СоЯіпе (ћр://ги.мікіреаїа.ого/мікі/Айхапсеа _Аџаіо_Соаіпд) 
известен под аббревиатурой ААС. Он был стандартизован в 1997 году и набрал 
силу после того, как компания АрріІе сделала его форматом по умолчанию в своем 
онлайн-магазине іТипеѕ Ѕоге. Первоначально все ААС-файлы, приобретаемые 
пользователями іТипеѕ Ѕ(оге, были зашифрованы проприетарной ОЕМ-схемой 
Арріе под названием ЕаігРІау. Но теперь многие композиции в іТипеѕ Ѕёоге до- 
ступны в виде незащищенных ААС-файлов. Арріе называет такой формат іТипеѕ 
Раз, ведь назвать его іТипеѕ Міпиѕ было бы как-то неудобно. Формат ААС защи- 
щен патентом; прейскурант на лицензирование можно найти в Интернете. 

Задачей разработчиков ААС было добиться более высокого качества звука, 
чем в МРЗ при таком же битрейте. В отличие от МРЗ, в котором определен набор 
доступных величин битрейта (верхняя граница — 320 Кбит/с), ААС допускает 
совершенно любой битрейт. Можно кодировать до 48 каналов звука, хотя это и не 
практикуется. Отличие формата ААС от МРЗ еще и в том, что он, подобно Н.264, 
имеет несколько профилей. ААС-аудио профиля «низкой сложности» может 
воспроизводиться в реальном времени на устройствах с ограниченной мощно- 
стью процессора. Более высокие профили обеспечивают при том же битрейте 
лучшее качество звука, но взамен требуют больше времени (или мощности) на 
кодирование-декодирование. 
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Все современные продукты Аррее, в том числе іРоа, АрреТУ и ОшсКТите, под- 
держивают те или иные профили самостоятельного ААС-аудио и аудиопотоков 
в контейнерах МРА. Проигрыватель АдоБе Е1аѕћ и видеопроигрыватели с открытым 
исходным кодом Мр/ауег и УТ.С умеют работать со всеми профилями ААС в МРА4- 
контейнерах. Для кодирования существует открытая библиотека ЕААС, поддержку 
которой можно добавить (при компиляции) в программы тепсойег и _трев. 


Могы$ 


Кодек УогБіѕ (Һр://ги.лмікіреаїіа.ого/\мікі/Могбіѕ) часто называют Ове УогЬіѕ, что тех- 
нически неверно, так как О55 — всего лишь формат контейнера (см. раздел «Ви- 
деоконтейнеры» этой главы), и, кроме того, аудиопоток Уогђіѕ может быть вложен 
в другие контейнеры. У0715 не патентован, поэтому с ним умеют работать сразу 
после установки все основные дистрибутивы Глпих, а также портативные устрой- 
ства с открытой прошивкой Боск Бох. Браузер Моха Еігеѓох 3.5 поддерживает 
воспроизведение О55-видеофайлов с аудиодорожками Уогђіѕ. Мобильные устрой- 
ства на платформе Араго! умеют воспроизводить самостоятельные аудиофайлы 
УогБіѕ. Обычно аудиопоток Уогђіѕ вкладывается в контейнер Ове или \!еЬМ, но 
также есть возможность вложить его в контейнер МР4, МКУ или (с некоторыми 
дополнительными хитростями) АУТ. Поддерживается произвольное количество 
каналов звука. 

Существует несколько реализаций кодека УогЬ1$ с открытым исходным кодом: 
кодировщики ОээСопуеге, аоТи\, декодировщики Йтрез и ПБуогЬ1$. Имеются так- 
же компоненты ОшсКТіте для Мас ОЗ Х и фильтры Отесс$Во\ для УЛп4о\. 
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Если ваши глаза еще не устали от многочисленных подробностей, значит, дело идет 
хорошо. Вы, конечно, уже заметили, что видео и аудио — сложные для изучения 
темы. А ведь приведенные выше сведения — лишь минимум! Теперь вам, без со- 
мнения, хочется знать, как все это относится к НТМІ5. Дело в том, что для встра- 
ивания видеофайлов на страницы в НТМІ5 предусмотрен тег <уійео>. Никаких 
ограничений на используемые видеокодеки, аудиокодеки и форматы контейнеров 
нет. Один тег <үійео> может ссылаться на несколько видеофайлов; из них браузер 
выберет самый первый, который сумеет воспроизвести. Значит, ваша задача — 
узнать, в каких браузерах какие контейнеры и кодеки поддерживаются. 
В период написания этой книги расстановка сил в НТМТ.5-видео была такой. 


О Мо7Ша Еігеѓох (3.5 и более новые версии) поддерживает видео Тћеога и аудио 
УогБіѕ в контейнере Оре. 


О Орега (10.5 и более новые версии) поддерживает видео Тћеога и аудио Уогђіѕ 
в контейнере Ове. 

О Соов1е Сһготе (3.0 и более новые версии) поддерживает видео ТБеога и аудио 
УогЬіѕ в контейнере Ове, а также видео Н.264 (всех профилей) и аудио ААС 
(всех профилей) в контейнере МР4. 
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О По состоянию на 9 июня 2010 года версии Соо51е СЬтоте для разработчиков, 
ночные сборки Срготилт, Мо7Ша Еігеѓох и экспериментальные сборки Орега все 
без исключения поддерживают видео УР8 и аудио Уог1$ в контейнере \еЬМ". 


О Ѕаѓагі на платформах Мас и \/п4до\уз РС (3.0 и более новые версии) поддержи- 
вает все то же самое, что и ОшсКТипе. Теоретически можно было бы предложить 
пользователям установить сторонние приложения ОшсКТипе, но на практике 
вряд ли кто-то будет утруждаться этим. Остается пользоваться форматами, под- 
держка которых есть в ОџшсКТіте по умолчанию. В их длинный список не входят 
видео Тћеога, аудио Уогђіѕ и формат контейнеров Ове. В ОшсКТіте, однако, есть 
поддержка видео Н.264 (основного профиля) и аудио ААС в контейнере МР4. 

О Такие мобильные устройства, как 1РБопе и смартфоны на платформе Соозе 
Апаго!4, поддерживают видео Н.264 (базового профиля) и аудио ААС (про- 
филя низкой сложности) в контейнере МРА. 

О АдоБе Е1аѕһ (9.0.60.184 и более новые версии) поддерживает видео Н.264 (всех 
профилей) и аудио ААС (всех профилей) в контейнере МРА. 

О Пщегпеё Ехрогег 9, как ожидается, будет поддерживать какие-то из профилей 
видео Н.264 и аудио ААС в контейнере МРА. 


О Іһѓегпеї ЕхрІогег 8 вообще не поддерживает НТМТ.5-видео, но почти у всех его 
пользователей установлен АдоБе Е1аѕћ. Далее в этой главе я покажу, как ис- 
пользовать Е1азВ в качестве резервного варианта при НТМТ.5-видео. 

В табл. 5.2 содержится та же самая информация в более удобном для восприя- 
тия виде. 


Таблица 5.2. Поддержка видеокодеков в стабильных браузерах 


Кодек/контейнер ТЕ Еігеѓох | Ѕағагі Сһготе | Орега їЇРһопе | Апагоіа 
Тһеога+Могріѕ+О99 – 3.5+ – 5.0+ 10.5+ – – 
Н.264+ААС+МР4 - - 3.0+ 5.0+ - 3.0+ 2.0+ 
\УмеБм - - - - - - - 


Спустя год расстановка сил существенно поменяется: поддержка \еЬМ будет 
реализована в стабильных версиях многих браузеров и пользователи начнут пере- 
ходить на эти стабильные версии. Ожидается, что поддержка кодеков будет такой, 
как показано в табл. 5.3. 


Таблица 5.3. Поддержка видеокодеков в ожидаемых версиях браузеров 


Кодек/контейнер ТЕ Ргегох | Ѕағагі Сһготе | Орега іРһопе | Апагоіа 
Тһеога+Могріѕ+О99 - 3.5+ – 5.0+ 10.5+ – – 
Н.264+ААС+МР4 = Е 3.0+ 5.0+ = 3.0+ 2.0+ 
\МеБм 9.0+* 4.0+ – 6.0+ 11.0+ – М 


Тъсегпеё ЕхрІогег 9 будет поддерживать \!еЬМ «только в том случае, если пользователь 
установил кодек УР»; тем самым МісгоѕоЁ заявляет, что в дистрибутив ІЕ9 этот кодек 
включен не будет. 

Соое обещал добавить поддержку МеЬМ в систему Арго! в следующем релизе, дата 
которого еще не определена. 


' За более свежей информацией обращайтесь на мертргојесі.оге, где доступны ссылки на 
установочные файлы браузеров, совместимых с еЬМ. — Примеч. авт. 
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Теперь приготовьтесь к сокрушительному удару... 


СЕКРЕТЫ РАЗМЕТКИ 


Такого сочетания медиаконтейнера и кодеков, которое Чтобы ваше видео можно было просматривать на лю- 
бы работало во всех браузерах с поддержкой НТМІ5, бом устройстве слюбой рабочей средой, его придется 
не существует. кодировать несколько раз. 

По-видимому, в ближайшем будущем ситуация не из- 

менится. 


Если вы стремитесь добиться наилучшей совместимости с существующими плат- 
формами, действуйте так. 


1. Создайте одну версию: видео в формате Тћеога и аудио Уог 5$ в О55-контейнере. 
2. Создайте другую версию: \/е М-контейнер, кодеки УР8 и Уог 5. 


3. Создайте третью версию: видео Н.264 базового профиля, аудио ААС профиля 
низкой сложности в контейнере МР4. 


4. Сошлитесь на эти три видеофайла из одного тега <\14ео>. Как запасной вариант 
подготовьте видеопроигрыватель на основе Е1аѕћ. 


Проблемы лицензирования видео Н.264 


Прежде чем продолжить, я не могу не отметить, что за кодирование видеоданных 
приходится платить двойную цену. Речь идет не только об очевидно дублиру- 
ющемся процессе кодировки одного и того же файла в разные форматы, что требует 
лишних затрат машинного времени. Я говорю о вполне осязаемой цене: лицензи- 
онных отчислениях за пользование кодеком Н.264. 

Когда я впервые рассказывал о видеоформате Н.264 (см. подраздел «Н.264» 
раздела «Видеокодеки» этой главы), я упомянул, что этот видеокодек защищен 
патентом и лицензии на его использование выдает Консорциум МРЕС ГА. Это, 
как оказывается, очень важно, а почему важно — разъяснит статья Н.264 Гісепѕіпе 
Таруги В, написанная Тимом Сиглином (Тіт $іеіп)“: 


Лицензионное портфолио Н.264 разделено МРЕС ІА на две сублицензии: одна — для произво- 
дителей программ-кодировщиков, а другая — для лиц, распространяющих видеоданные. [...] 
Сублицензия на вещание далее подразделяется на четыре ключевые категории, две из кото- 
рых (подписка и одноразовая покупка, называемая также платным использованием) относят- 
ся к ситуации, когда конечный пользователь непосредственно платит за видеосервисы; другие 
две («бесплатное телевидение» и интернет-вещание) предусматривают платежи из иных ис- 
точников, нежели средства конечного пользователя. [...] 

Лицензионные отчисления за «бесплатное телевидение» бытуют в двух вариантах. Первый 
представляет собой одноразовый платеж размером $2500 за кодировщик А\С-передачи, то есть 
ровно один АМС-кодировщик, «используемый получателем лицензии или по его доверенности 
для передачи АМС-видео конечному пользователю». Пользователь, в свою очередь, будет де- 
кодировать и просматривать видео. Если вы спросите, не двойной ли получается оплата, то 
ответ будет положительным, ведь лицензионный сбор уже уплачен производителем программы- 
кодировщика, а вещание также обложено отчислениями (одного из двух типов). 


1 Вер: /ууу.ѕігеатіпотейіа.сот/АгіісІеѕ /Еісогіа]/Ееабигей-АгіісІеѕ/Тће-Н.264-11сепѕіпе- 
ГаБугіпћ-65403.аѕрх. — Примеч. авт. 
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Второй вариант лицензионного сбора — годовая лицензия на вещание. [...] В этом случае сбор 
зависит от размера обслуживаемой аудитории: 

• $2500 за календарный год для сетей вещания на 100000—499 999 домохозяйств; 

• $5000 за календарный год для сетей вещания на 500000-999999 домохозяйств; 

• $10000 за календарный год для сетей вещания на 1000000 и более домохозяйств. 

[...] Однако при всех сложностях с «бесплатным телевидением», как это затрагивает интере- 
сы лиц, вовлеченных в распространение видео помимо сетей вещания? Как сказано выше, 
оплачиваться должно любое распространение контента. Оговорив, что «бесплатное телеви- 
дение» не ограничивается [обычным телевещанием], Консорциум МРЕС ІА установил сборы 
за интернет-вещание, понимаемое как «распространение А\С-видео по Всемирной сети конеч- 
ным пользователям таким образом, что они не платят за право получать и просматривать 
видео». Иными словами, всякое вещание — [обычное телевизионное] кабельное, спутниковое 
или посредством Интернета — облагается лицензионным сбором. [...] 

Компенсация за интернет-вещание обещает быть выше, чем за другие формы, так как аудитория 
Интернета растет гораздо быстрее, чем аудитория обычного телевидения, кабельного и спутни- 
кового «бесплатного телевидения». Таким образом, к сборам с вещательного рынка «бесплат- 
ного телевидения» прибавится еще один сбор, но МРЕС ІА предоставляет отсрочку до конца 
первого года действия лицензии, то есть 31 декабря 2010 года. После этого, как отмечает Кон- 
сорциум, «отчисления будут не выше экономического эквивалента отчислений, которые можно 
было бы получить в то же время с сопоставимых сетей бесплатного телевидения». 


В последний пункт, касающийся сборов с интернет-вещания, уже внесена поправ- 
ка. Недавно МРЕС Г.А объявил, что бесплатный обмен видеоданными в Интернете 
продлен до 31 декабря 2015 года. Одному Богу известно, что будет после этого. 


Кодирование Одд-видео 
с помощью Еігеѓодд: 


Еігеѓове — расширение Еігеѓох с открытым исходным кодом, распространяемое 
под лицензией СРГ. Оно позволяет кодировать О55-видео. Для использования 
Еігеѓове надо установить МохШа Еігеѓох версии 3.5 или более свежей, а затем зай- 
ти на сайт проекта. Главная страница этого сайта показана на рис. 5.1. 

Щелкните на ссылке Іпѕќаі! Еігеѓодо (Установить Етею55). Браузер спросит, дей- 
ствительно ли вы хотите установить расширение. Нажмите кнопку Айом! (Разре- 
шить) для продолжения установки (рис. 5.2). 

Появится стандартное окно установки программ в Еігеѓох. Чтобы продолжить, 
нажмите кнопку Іпѕќа!! Мом (Установить сейчас) (рис. 5.3). 

Для завершения установки нажмите кнопку Веѕіагї Рігеѓох (Перезапустить Еігеѓох) 
(рис. 5.4). 

Когда браузер перезапустится, сайт Еігеѓове подтвердит, что установка прошла 
успешно (рис. 5.5). 

Чтобы запустить процесс кодирования, щелкните на ссылке Маке мер уійео 
(Создать веб-видео) (рис. 5.6), затем выберите исходный файл, нажав кнопку 
б@аесЕ Ме (Выбрать файл) (рис. 5.7). 


' Здесь термином «Ове-видео» кратко обозначается видео Тћеога и аудио Уог1$ в кон- 
тейнере Ове. Мох Ша Еігеѓох и Соое Сһготе имеют встроенную поддержку этого со- 
четания кодеков с контейнером. — Примеч. авт. 
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Рис. 5.1. Домашняя страница Еігеѓодд 
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Рис. 5.2. Разрешим установку Еігеѓодо 
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Установка программного обеспечения [ОХ 


А Устанавливайте дополнения только от тех авторов, 
! которым вы доверяете, 


Злонамеренное программное обеспечение может повредить или похитить 
информацию, находящуюся на вашем компьютере. 


Вы запросили установку следующего дополнения: 


Еігеѓод9-1.2.12.хрі ГАвгор не проверен) 
Һер: //Ёғеғодд.ога/міп32/Еігеѓодд-1.2.12.хрі 


Рис. 5.3. Установка Еігеѓодд 


(©) дополнения 


а әв о 


Поиск дополнений Расширения Темы Плагины Установка 


17] Для завершения изменений перезапустите Еігеѓох, 


я Еігеѓодд 1.2.12 
Для завершения установки требуется перезапуск, 


Рис. 5.4. Повторно запустим Еігеѓох 
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Рис. 5.5. Установка прошла успешно 
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Рис. 5.6. А не закодировать ли нам видео? 
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Рис. 5.7. Выберем исходный видеофайл 


Основной интерфейс Бігеѓове состоит из шести вкладок (рис. 5.8). 


О Ргеѕеіѕ (Шаблоны) — по умолчанию здесь выбрано Мер-мійео (Веб-видео), что 
вполне отвечает нашим целям. 


О Епсо@д гапде (Кодируемый интервал). Кодирование видео — небыстрый про- 
цесс. При знакомстве с программой стоит попробовать закодировать часть ис- 
ходного видеофайла (например, первые 30 секунд), чтобы затем эксперименти- 
ровать с настройками. 


О Ваѕіс диаШу апа геѕоіийоп сопќго! (Базовые настройки качества и разрешения) — 
здесь находится большинство настроек, важных для нас. 


О Меада (Метаданные) — не буду писать об этом подробно, но вам следует знать, 
что закодированное видео можно оснащать метаданными: название, автор ит. п. 
Вы, вероятно, хоть раз добавляли к своим музыкальным коллекциям метадан- 
ные с помощью 1Типеѕ или другой программы-менеджера; здесь происходит то 
же самое. 


О Адуапсеа уійео епсо@та сопіго!ѕ (Дополнительные настройки видеокодирова- 
ния) = не меняйте здесь ничего, если не владеете нужными знаниями. О боль- 
шинстве представленных здесь настроек пишет интерактивная справка Еігеѓове. 
Чтобы вызвать ее, щелкните на букве і рядом с интересующей настройкой. 
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О Адуапсеа аџӣіо епсоаіпо сопёго5 (Дополнительные настройки аудиокодирова- 
ния) — здесь тоже лучше ничего не менять. 
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Рис. 5.8. Основной интерфейс Еігеѓодд 


Подробно рассмотрим только вкладку Ваѕіс диаіїќу апа геѕоіийоп сопігоі (Базовые 
настройки качества и разрешения) (рис. 5.9), где содержатся все важнейшие на- 
стройки. 

О Мідео диаіќу (Качество видео) — шкала размечена от 0 (наихудшее качество) до 
10 (наилучшее качество). Чем больше выбранное число, тем больше по объему 
получится файл. Чтобы найти оптимальное для ваших требований соотношение 
объема и качества, надо экспериментировать. 


О Ацаю аиаіќу (Качество аудио) — шкала размечена от 0 (наихудшее качество) до 
10 (наилучшее качество). Как и в случае с видео, чем больше выбранное число, 
тем больше по объему получится файл. 


О Мідео содес (Видеокодек) — здесь должно быть выбрано Тһеога. 


о 


Аџаіо содес (Аудиокодек) — здесь должно быть выбрано Могбіѕ. 


О Міаео міаћ (Ширина видео) и Міаео һеідһ& (Высота видео) — по умолчанию значе- 
ния в этих полях приравниваются к ширине и высоте кадров исходного файла. 
Если хотите в процессе кодирования поменять горизонтальный или вертикальный 
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размер, впишите желаемое значение здесь. ЕтеЮ5$ автоматически определит зна- 
чение другой координаты, при котором сохраняется исходное соотношение сторон 
кадра, так что картинка вашего видеофайла не будет сжатой или растянутой. 


® Ғігеѓодд - Маке мер ео - МогШа Еігеѓох [> @ Еа 
Файл Правка Вид Журнал Закладки Инструменты Справка 
<] - Е А шт О Вбр: //АгеРодд.ого{такейпдех. Нет түе. >| | - $ | 
БӘ) Самые популярные 13 Начальная страница (№ | Лента новостей 


2 Ғігеѓодд - Маке меб учео 
а» Ѕеіесї пем Ме Е Епсодйе {0 Не 
^%1000001.МРА4 
› Ргеѕеќ: Сиѕќот ѕебіпоѕ 
› Епсойіпо гапде 
Ваѕіс циаіќу апа гезоийоп сопќгої 


© М 


Ө ‘аео диайу 


Олич циайу 


—_ 


@\/чес содес [ЧВеога ~ 
@личо содес [мотіѕ ы 


@Учес мч: 


» Меѓайаќа їог ће сір 


 дфғапсей мео епсойіпо сопігоіѕ 


4 


Готово 


Рис. 5.9. Базовые настройки качества и разрешения 


На рис. 5.10 показано, как я вдвое уменьшил ширину исходного видео. Заметь- 
те, что Етею5$ автоматически подбирает нужную высоту. 

После выставления всех настроек нажмите кнопку Епсоде їо Ее (Закодировать 
в файл), чтобы запустить процесс кодирования (рис. 5.11). При этом ЕтеЮз$ по- 
просит ввести имя для закодированного файла. 

Во время кодирования Еігеѓове будет показывать красивый индикатор (рис. 5.12). 


Остается только ждать. 


Пакетное кодирование Одд-видео 
с помощью #тред2{ћеога 


Существует несколько офлайновых программ-кодировщиков О55-видео. Если вам 
надо закодировать большое количество файлов и вы желаете автоматизировать 
процесс, обязательно воспользуйтесь программой Нтреё2еога (Һір://м2у.сс/~ј/ 
Итред2Пеога/). 
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Рис. 5.10. Выбор ширины и высоты кадра 
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Рис. 5.11. Запустим процесс кодирования 
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Рис. 5.12. Идет кодирование... 


#трев2+ћеога — это программа для кодирования О55-видео с открытым исход- 
ным кодом, распространяемая под лицензией СРІ.. Доступны готовые сборки для 
Мас О$ Х, УЛпао\у$ и современных дистрибутивов Ііпих. В качестве исходного 
при кодировании может выступать практически любой видеофайл, в том числе 
цифровое видео (ЮУ), записываемое камерами потребительского уровня. 

Чтобы начать работу с Нире=2Веога, вызовите ее из командной строки. В \/т- 
Чо\з это Главное меню » Программы › Стандартные › Командная строка. В Мас ОЗ Х — 
Приложения » Утилиты › Терминал. 

Программа Нтреё2(Веога понимает много разных аргументов командной стро- 
ки (флагов). Подробнее о них можно прочитать, вызвав 1 тред2{йеога - -Пе1р, я же 
сосредоточусь на трех аргументах. 

О --үійео-дџа1іёу 0, где 0 принимает числовые значения от 0 до 10. 

О --аи1о-диа11%у 0, где 0 принимает числовые значения от —2 до 10. 

О --тах $12е И х Н, гдеИи Н — это соответственно максимальная ширина и высота 
кадра в видеофайлах, которые вы хотите получить на выходе (заметьте, что меж- 
ду первым и вторым числами должна быть набрана латинская буква х,а не какой- 
либо другой символ). Программа Ётрев2(ћеога подберет размер, сохраняющий 
пропорции сторон, так что размеры кадра в выходном файле могут быть меньше, 
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чем Их А. Так, если при кодировании видео размерами 720 х 480 пикселов назна- 
чить --пах_ ѕіле 320 х 240, то получится видеофайл с кадрами 320 пикселов ши- 
риной и 213 пикселов высотой. 


Вот каким образом можно закодировать видео с теми же настройками, что 
и в предыдущем разделе: 


уои@Тоса1ћоѕ% ГРтредёНеога - -у1Чеодиа11{у 5 
- -аиЧтодиа11%у 1 
--тах_$17е 320х240 
ргб. ам 


Закодированный файл будет сохранен с расширением ОСУ втой же папке, что 
и исходное видео. Чтобы изменить это умолчание, надо передать Нтрез2Беога 
в командной строке аргумент вида --оибрий=/путь_к_закодированному файлу. 


Кодирование Н.264-видео 
с помощью НапаВгаКе! 


Если оставить в покое вопросы лицензирования (см. раздел «Проблемы лицен- 
зирования видео Н.264» этой главы), то проще всего создавать Н.264-видео с по- 
мощью программы Нап ВгаКе (ПЁр://папаБгаке.*г). НапаВгаке — это программа 
для кодирования Н.264-видео с открытым исходным кодом, распространяемая 
под лицензией СРТ. (раньше она знала и другие видеоформаты, но в последней 
версии разработчики прекратили поддержку большинства из них, чтобы сосре- 
доточить все свои усилия на Н.264-видео). Доступны готовые сборки для Мас ОЗ Х, 
М/т4о\з и современных дистрибутивов Глпих (ВЕр://папабгаке.#"/домитюад$.рНр). 

НапаВгаке существует в двух формах: как приложение с графическим интер- 
фейсом и утилита командной строки. Сначала я покажу вам графический интер- 
фейс, а потом мы выясним, как найденные нами оптимальные установки превра- 
тить в последовательность команд терминала. 

Открыв программу НапаВгаке, выберите исходный видеофайл (рис. 5.13). 
Щелкните на пункте боигсе (Источник) и, выбрав Мійео Рііе (Видеофайл), найди- 
те нужный файл. НапаВтаКе может принимать в качестве исходного практически 
любой файл, в том числе цифровое видео (ЮУ), записываемое камерами потре- 
бительского уровня. 

НараВгаке предупредит, что вы не выбрали папку, в которой бы по умолча- 
нию сохранялись закодированные файлы (рис. 5.14). Можно оставить без вни- 
мания это предупреждение, а можно открыть окно настроек (пункт меню ТооЇѕ 
(Инструменты)) и назначить директорию по умолчанию для результатов рабо- 
ты программы. 


' Здесь термином <Н.264 уійео» кратко обозначается видео Н.264 базового профиля 
и аудио ААС профиля низкой сложности в контейнере МРЕС-4. Ѕаѓагі, Айође Е1аѕћ, 
а также іРћопе и устройства на платформе Сооёе Апаго!4 имеют встроенную под- 
держку этого сочетания кодеков с контейнером. — Примеч. авт. 
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Рис. 5.13. Выберем исходный видеофайл 
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Рис. 5.14. Проигнорируем предупреждение 
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В правой части окна имеется список шаблонов. Если выбрать шаблон іРһопе 
& ПРОЧ Тоисп, как показано на рис. 5.15, то большинство нужных нам настроек 
будут выставлены автоматически. По умолчанию отключена важная настройка 
веб-оптимизации (флажок \М№еБ орітігеа). Если установить флажок, как показа- 
но на рис. 5.16, то метаданные файла будут организованы так, что пользователь 
сможет приступить к просмотру, не дожидаясь конца загрузки, которая будет 
тем временем продолжаться в фоновом режиме. Рекомендую всегда устанавли- 
вать этот флажок. На качество картинки и размер закодированного файла эта 
настройка не влияет, так что нет причин избегать ее. 
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Рис. 5.15. Выберем шаблон іРһопе 


На вкладке Рісіиге (Картинка) (рис. 5.17) можно выбрать максимальную высоту 
и ширину кадров закодированного видеофайла. Чтобы программа НапаВгаке не 
растягивала и не сжимала кадры при обработке, следует выставить флажок Кеер 
АѕЅресі Кайо (Сохранить пропорции). 

На вкладке Міаео (Видео), изображенной на рис. 5.18, представлено несколько 
важных настроек. 


О Міаео Содес (Видеокодек) — убедитесь, что выбрано значение Н.264 (х264). 


О 2-Раѕѕ Епсоаіпо (Кодирование в два прохода) — если установлен этот флажок, то 
НаравВгаке запустит кодирующий модуль дважды. В первый раз программа 
анализирует исходный видеофайл: сочетания цветов в нем, движение на экране, 
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разбивку на сцены. Второй проход — собственно кодирование, привлекающее 
информацию, которая была получена во время первого прохода. Как и следует 
ожидать, кодирование в два прохода будет примерно вдвое дольше по времени, 
зато на выходе получится файл лучшего качества без прироста в объеме. Я всег- 
да выполняю кодирование Н.264-видео в два прохода и советую делать вам то 
же самое, если, конечно, вы не строите второй ҮоиТиђе и вам не приходится 
возиться с кодированием видео 24 часа в сутки. 


О Тигбо ћгѕї Раѕѕ (Первый проход в турборежиме) — при двухпроходной кодиров- 
ке благодаря этой настройке можно сэкономить часть времени. Она уменьшает 
объем работы, выполняемой во время первого прохода кодировщика, что, одна- 
ко, лишь немного снижает качество. Я обычно устанавливаю этот флажок, но 
если вы цените качество превыше всего, снимите флажок. 


О ОцаЙу (Качество) — качество кодируемого видео определяется несколькими 
способами. Можно указать желаемый объем конечного файла, и тогда Нап4Вгаке 
сделает все возможное, чтобы вместить итог своих трудов в заявленный объем. 
Как альтернативу можно указать средний битрейт, то есть буквально количе- 
ство бит, приходящихся на одну секунду кодированного видео (о «среднем» 
битрейте говорят потому, что не все секунды требуют одинакового количества 
бит). Можно, наконец, выбрать постоянный коэффициент качества на шкале от 
0 до 100 %. Чем выше процент, тем лучше качество и тем больше файл. Нельзя 
однозначно сказать, какой из настроек качества лучше пользоваться. 
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Рис. 5.16. Не забудем о веб-оптимизации 
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Рис. 5.17. Назначим горизонтальный и вертикальный размеры 
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Рис. 5.18. Настройки качества видео 
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РАЗМЕТКА В ВОПРОСАХ И ОТВЕТАХ 


Вопрос: Можно ли кодировать 099-видео тоже в два 
прохода? 


Ответ: Да, но ввиду фундаментальных отличий в алгорит- 
ме кодирования это вряд ли необходимо. Кодирование 
Н.264-видео в два прохода почти всегда повышает ка- 
чество картинки, тогда как двухпроходное кодирование 


определенной степени (возможно, вы заинтересованы 
именно в этом, но мой опыт свидетельствует о неце- 
лесообразности такой меры, да и лишнего времени на 
кодирование веб-видео тратить не стоит). Наилучшее 
качество 099-видео обеспечивают настройки качества 
видео, а о кодировании в два прохода беспокоиться не- 
зачем. 


099-видео способно только снизить размер файла до 


В данном примере я установил средний битрейт 600 Кбит/с, что довольно мно- 
го для видео с разрешением 320 х 240. Я разрешил кодирование в два прохода с пер- 
вым проходом в турборежиме. 

На вкладке Ацаю (Аудио), которую показывает рис. 5.19, вам вряд ли придется 
что-либо менять, кроме двух настроек. Во-первых, если исходный файл содержит 
несколько аудиодорожек, то, возможно, придется выбрать, какую из них оставить 
в закодированном файле. Во-вторых, если звуковое сопровождение вашего видео — 
это преимущественно речь людей, а не музыка и звуки окружающего мира, то бит- 
рейт аудиодорожки можно понизить до 96 Кбит/с или около того. Прочие настрой- 
ки, унаследованные из шаблона іРһопе, оптимальны. 
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Рис. 5.19. Настройки качества аудио 
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Нажмите кнопку Вгомѕе (Обзор) (рис. 5.20), чтобы выбрать имя закодирован- 
ного видеофайла и место его сохранения. 
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Рис. 5.20. Выберем имя конечного файла 


Чтобы приступить к кодированию, щелкните на пункте ай (Запуск) (рис. 5.21). 
По мере преобразования вашего видеофайла программа Нап4ВгакКе будет вы- 
водить кое-какую статистику (рис. 5.22). 


Пакетное кодирование Н.264-видео 
с помощью НапаВгаке 


Выше было упомянуто о варианте НапіВгаке для командной строки. Свежую 
версию этого «издания» можно скачать по адресу Һ&р://һапабгаке.Ёг/аомпіоайѕ2. 
рһр. 

Программа НапаВгаке для командной строки, подобно Ќпрев2(ћеога (см. раз- 
дел «Пакетное кодирование Ор5-видео с помощью Ќтрев2(ћеога» этой главы), 
может принимать множество разных аргументов. Подробнее о них можно прочесть, 
набрав НапаВгакесЕТ - -пе1р в окне терминала или командной строке, а я расскажу 
лишь о нескольких. 
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Рис. 5.21. Итак, не закодировать ли нам видео? 
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Рис. 5.22. Спокойствие, только спокойствие... 


--ргезеф "Х", где Х — название шаблона НапаВгакКе (оно обязательно должно 
быть заключено в кавычки). Шаблон для сетевого Н.264-видео называется 
1РВопе & 1Ро4 Тоисћ. 


--мійћ И, где И — ширина кадров закодированного видеофайла. Нап4Втаке 
автоматически подберет высоту так, чтобы исходные пропорции были сохра- 
нены. 


--\6 0, где 0 — средний битрейт (Кбит/с). 
- -мо-раѕѕ — флаг, включающий кодирование в два прохода. 


- -Сигро — флаг, разрешающий при двухпроходной кодировке первый проход 
в турборежиме. 


--Тириё Р, где Е — имя исходного видеофайла. 


- -оиЁриї Е, где Е — имя конечного (закодированного) видеофайла. 
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Рассмотрим, как можно, работая в командной строке, передать НапіВгаКе те же 
самые настройки кодирования, которые мы ранее выставили в графической версии 
программы: 


уои@1оса1һћоѕ% НапаВгакесеТ - -ргеѕеё “іРһопе & 1Роа Тоисй” 
--міаєћ 320 
--УБ 600 
- -Емо-раѕѕ 
- -Фигро 
--іприё ргб. ау 
- -оиЁриё ргб.тр4 


Разберемся с этой записью по порядку. Пользователь запускает НапаВтаке 
с шаблоном іРһопе & іРоа Тоисћ, устанавливает размеры кадра 320 х 240, определя- 
ет значение среднего битрейта равным 600 Кбит/с, включает кодирование в два 
прохода с первым проходом в турборежиме. Программа читает файл ргб.4\ и вы- 
дает файл ргб.тр4. Отлично! 


Кодирование МеБМ-видео с помощью 
программы #тред 


Я пишу эти строки 20 мая 2010 года. Формат ҰеБЬМ был выпущен в свет бук- 
вально вчера (я не шучу), и поэтому ассортимент программ-кодировщиков не- 
велик, а подробных руководств совсем мало. Со временем, когда нужные ин- 
струменты будут написаны (или обновлены), запускать кодирование в \Уе М 
можно будет одним щелчком кнопкой мыши, но пока нам понадобится следу- 
ющий арсенал. 


О ПБур8 и особая версия Ќтреє с дополнениями (обеспечивающими совмести- 
мость с ПЬур8), которые пока не вошли в состав официального репозитория 
Ќтпреғ: 

• установка в іпих (Һ№р:/Лагабискеё.огд/Ыіод/агсһімеѕ/2010/05/19/ур8-мерт-апа- 
Ётред/) — эти инструкции я проверил лично под ОС ОБипќи Гас 10.04; 


• установка в Міпіоҹѕ (Һр://ммм.іопсаппоп.пеб/теёа/1128/сотріііпо-мерт- 
Ётпред-уіпаоуѕ/) — эти инструкции я не проверял. 


О Самая свежая версия тіксІеап (Һр://мму.таёгоѕка.огд/аомтпіоадѕ/ткКсіеап.Һёті). 


Готовы? Запустите трее из командной строки без параметров и удостоверь- 
тесь, что программа была скомпилирована с поддержкой УР8: 


уои@1оса1ћоѕ% ТР тред 

ЕЕтред уегз1оп 51№-723197, Соругіоһі (с) 2000-2010 тие ЕЁЕтред деүе1орегѕ 
риі1і оп Мау 19201022:32:20 улЕН дсс 4.4.3 
соп1дига{ Топ: --епарТе-9р1 --епар1е-мегѕіопЗ --епар1е-поп?гее 
--епар1е-роѕїргос --епар1е-рїћгеайѕ --епар1е-11рҒаас --епар1е-11рҒааа 
--епаб1е- 11ртрЗ1ате - -епар1е- 11рорепсоге-атгпо - -епарТе- 1 1рорепсоге-атгмр 
--епар1е- 11рЕһеога --епар1е- 116х264 --епар1е-11рхуіа --епар1е-х119гар 
- -епаБ1е-11ірурх-ур8 
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Если волшебные слова - -епар1е-1ірурх-ур8 не появились на экране, то у вас не 
та версия Нтрез, которая нам нужна. Если вы голову даете на отсечение, что все 
скомпилировали правильно, то проверьте, не установлено ли у вас две версии 
программы. Разные версии Нпрез, установленные параллельно, не конфликтуют, 
но в этом случае вам надо вводить полный путь к той из них, которая поддержи- 
вает УР8. 

Рассмотрим, как делать кодирование в два прохода (см. раздел «Кодирование 
Н.264-видео с помощью НапаВгаке» этой главы). При первом проходе сканирует- 
ся входной файл (-1 ргб.ӣу) и кое-какую статистику по нему программа выводит 
в файл журнала, которому автоматически будет присвоено имя ргб.ау-0.109. Пара- 
метр -усодес отвечает за выбор видеокодека: 


уои@оса1һоѕї% Ғ?Ғтред -раѕѕ 1 -раѕ5109#і1е ргб.ду -Еһгеайѕ 16 
-океп рагііїіопѕ 4 -а1&ге? 1 -1ад 16 -Кеуіпе тіп 0 
-9 250 -ть $фаф1с ҰһгеѕһоТа 0 -ѕкір +һгеѕһо1а 0 -атіп 1 -дтах 51 
-1 ргб.ау -усойес 11Бурх_мр8 -ап -Р гамуіаео -у МІ 


Большинство этих команд никак не относится к УР8 или №УеЬМ. Библиотека 
ПБур8 поддерживает несколько параметров, специфичных для УР8, которые мож- 
но передать трее в командной строке, но я пока не знаю, как ими пользоваться. 
Как только я найду в Интернете внятное объяснение сути этих параметров, на сай- 
те оригинальной книги появится соответствующая ссылка. 

При втором проходе трее прочитает статистику, записанную во время перво- 
го прохода, и выполнит собственно кодирование видео- и аудиопотоков. На вы- 
ходе мы получим МКУ-файл, который позднее преобразуем в \еБМ (в конце 
концов Нтрез обязательно научится создавать \Ме 6 М-файлы напрямую, но пока, 
по весьма тонким причинам, это невозможно). 

Второй проход запускается следующими командами: 


уои уои@оса1ћоѕ% ТРтред -раѕѕ 2 -раѕ5109?іТе ргб.4у -{Игеа4$ 16 
-океп рагііїіопѕ 4 -а1&ге? 1 -1ад 16 -Ккеуіпе тіп 0 
-9 250 -тЬ фас Ұһгеѕһо1а 0 -ѕкір +һгеѕһо1а 0 
-атіп 1 -дтах 51 -1 ргб.ау -усойес 11бурх ур8 
-Б 614400 -5 320х240 -аѕресї 4:3 -асодес уогЬіѕ -у ргб.тку 


Здесь пять важных параметров: 


О -усодес 11рурх үр8 — указывает, что мы пользуемся видеокодеком У Р8, как и всег- 
да при кодировании \’е6М-видео; 


О -р 614400 — определяет битрейт. В отличие от других инструментов, ПБур8 ожи- 
дает, что пользователь введет значение в битах (а не килобитах). Таким образом, 
для получения видео с битрейтом 600 Кбит/с надо указать 600 х 1024 = 614400; 


О -5 320х240 — задает размер кадра в конечном видеофайле (ширину и высоту); 


О -аѕресї 4:3 — определяет соотношение сторон кадра. В видео обычной четко- 
сти это соотношение, как правило, равно 4:3, а в высокочетком составляет 16:9 
или 16:10. Мой опыт показывает, что это соотношение надо в явном виде ука- 
зать в командной строке, чтобы программа Нпрей не ошиблась при автоопре- 
делении; 
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О -асодес үогріѕ — указывает, что мы пользуемся аудиокодеком Уог 5, как и всег- 
да при кодировании М№еЬМ-видео. 


Теперь у нас есть МКУ-файл с видео УР8 и аудио УогЫѕ. Это уже очень близко 
к нужному: формат контейнеров У7еЬМ в техническом отношении очень схож 
с МКУ, более того, он является его строгим подмножеством. Чтобы создать окон- 
чательный Мер М-видеофайл, надо заменить всего лишь несколько бит с помощью 
названной выше утилиты шКс[еап: 


уои@Тоса1ћоѕ% ткс1еап - -йосЁуре 4 ргб.тку ргб.мебт 


Вот и все! 


...И наконец разметка 


Если это книга об НТМТ, то где же образцы разметки? Вот мы до них и добра- 
лись. 

В НТМІ 5 есть два способа размещения видео на веб-страницах, оба задейству- 
ют тег </14е0>. Если у вас только один файл, то сослаться на него можно в атрибу- 
те ѕгс. Такая запись обнаруживает замечательное сходство с тегом для картинок 
<1то $гс="...">. 


<үідео $гс=”ргб.мебт”></у14ео> 


В принципе, больше ничего не надо указывать. Но, как и в случае с тегом <іто>, 
рекомендуется всегда прописывать для <\/14е0> атрибуты м1 {И и һеідһї. Их значе- 
ния могут быть такими же, как значения максимальной ширины и высоты кадра, 
выбранные вами в процессе кодирования: 


<үідео 5гс="ргб .мерт" міасћ=” 320” һеї9һі=”240"></ү1йео> 


Не беспокойтесь, если по одной из координатных осей ваше видео чуть меньше. 
Браузер просто поместит его по центру прямоугольника, заданного тегом <\1део>, 
и не будет растягивать или сжимать, нарушая пропорции. 

По умолчанию тег <\14е0> не отображает виджетов, управляющих воспроиз- 
ведением. Нужные кнопки можно создать с помощью старых добрых НТМГ, С$5 
и Јауа$сгірі. Для тега <үійео> определены такие методы, как р1ау() и раиѕе(), атак- 
же доступное для чтения и записи свойство сиггепіТіте; кроме этого, доступны 
для чтения и записи свойства уо1ипе и пиїей. Таким образом, в вашем распоряже- 
нии есть все необходимое, чтобы построить собственный пользовательский ин- 
терфейс. 

Если не хотите строить свой интерфейс, можно воспользоваться встроенным 
набором элементов управления. Для этого вставьте в тег <\14е0> атрибут сопёго1$: 


<үідео $гс="ргб.мебт" итаИ="320" һеіоһі="240" сопго15></үуійео> 


Прежде чем идти далее, скажу еще о двух необязательных атрибутах: рге1оай 
и аџїорТау. Теперь позвольте разъяснить, чем они полезны. 

Атрибут рге1оаа говорит браузеру, что скачивание видео надо начать сразу по 
окончании загрузки страницы. Это целесообразно в том случае, если просмотр 
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видео — единственная цель посещения данной страницы. Если же видео — лишь 
вспомогательный материал, интересный для небольшого количества посетителей, 
то атрибуту рге1оай лучше присвоить значение попе. Тем самым будет снижен се- 
тевой трафик. 

Вот пример веб-видео, скачивание которого (но не воспроизведение) начнется 
сразу после загрузки страницы: 


<үїдео ѕгс="ргб .мерт" міаєћ="320" һеіоһі=" 240" рге]оад></у14ео> 
А вот такой клип не начнет автоматически скачиваться после загрузки страницы: 
<үїдео згс="ргб.мебт" міаєћ= "320" һеіоһі="240" рге]оад=”попе”></у14ео> 


Атрибут аиёор1ау, в свою очередь, говорит браузеру, что надо не только начать 
скачивать видео сразу по окончании загрузки страницы, но и начать его воспро- 
изводить как можно раньше. Это, конечно, нравится не всем. Нов НТМІ5 важно 
иметь такой атрибут. Есть на свете люди, заинтересованные в том, чтобы их ви- 
деофайлы воспроизводились автоматически, невзирая на реакцию посетителей. 
Если бы в НТМТ.5 не было стандартного механизма автозапуска видео, то такие 
люди прибегали бы к уловкам Јауа$Ѕсгірї, например вызывали метод р1ау() видео- 
элемента при событии м1иаом. опТоа4. Этой форме навязывания очень сложно про- 
тивостоять. Напротив, в нынешней ситуации можно установить (или, если угодно, 
написать) браузерное расширение, которое позволит всегда игнорировать атрибут 
аиторТау. 

Приведу пример веб-видео, скачивание и воспроизведение которого начнется, 
насколько это возможно, сразу после загрузки страницы: 


<үїдео ѕгс="ргб .мерт" міаћ="320" һеїіоһі="240" аиёорТ1ау></уійео> 


Существует сценарий Стеазетопкеу (Һїр://лмм.дгеаѕеѕрої.пеї), которым вы мо- 
жете дополнить свою копию Еігеѓох. Этот сценарий предотвращает автоматическое 
воспроизведение НТМТ.5-видео. В нем используется определенный в НТМТ.5 
РОМ-атрибут аибор1ау. Это Јауа$сгірі-эквивалент того атрибута аиёор1ау, который 
доступен в НТМГ-коде: 


// ==)ѕегЅсгірї== 
// @пате О15абТе у1аео аиборТау 
// @патезрасе Пеер: //аіуеіпіотагк .ого/ргојесїѕ /дгеаѕетопкеу/ 
// @деѕсгірілоп Епѕигеѕ һа НТМЕ5 уїдео е1етепіѕ до пої аиёорТау 
// @1исТиае Ж 
// ==/10ѕегЅсгірї== 
уаг аг\/1аео$ = доситепї .деЕЕ1етепёѕВуТадћате( 'у14ео'); 
Тог (маг 1 = агуіаеоѕ.Тепоёћ - 1; і >= 0; 1--) { 
уаг е|м\/14ео = агүіаеоѕ[1]; 
е1м\/14ео.аифор1ау = Ға1ѕе; 


} 


Остановимся на минутку. Если вы внимательно и подряд читали эту главу, то 
знаете, что в нашем распоряжении сейчас не один видеофайл, а целых три. Пер- 
вый — ОСУ-файл, созданный с помощью Еігеѓовє (см. раздел «Кодирование Оэв- 
видео с помощью Еігеѓове» этой главы) или #трев2(ћеога (см. раздел «Пакетное 
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кодирование О55-видео с помощью Нтреё2Веога» данной главы). Второй — 
МР4-файл, созданный с помощью программы НапаВтаке (см. раздел «Кодирова- 
ние Н.264-видео с помощью Нап@ВгаКе» этой главы). Третий — УЕВМ -файл, соз- 
данный с помощью Н"прер (см. раздел «Кодирование МеЬМ-видео с помощью 
НЙ тред» этой главы). 

НТМТ5 позволяет сослаться на все три файла с помощью тега <зоигсе>. Каждый 
тег <үійео> может содержать столько тегов <50игсе>, сколько нужно. Браузер, дви- 
гаясь сверху вниз по списку файлов-источников, воспроизведет первый же файл, 
который сумеет. 

Возникает вопрос: как браузер определит, что может или не может воспроизве- 
сти тот или иной файл? В худшем случае он будет загружать каждый файл и пы- 
таться воспроизвести его. Это, естественно, огромный расход трафика. Чтобы не 
напрягать сеть лишний раз, следует говорить браузеру всю правду о видеофайлах. 
Это позволяет сделать атрибут іуре тега <зоигсе>. 

Вот как будет выглядеть дополненный код: 


<у14ео міаїћ="320" һе19һі="240" сопЕго15> 
<ѕоџгсе згс=”ргб.тр4” Туре=’у14ео/трА4; сойесѕ="аус1.42Е01Е, трд4а.40.2"'> 
<ѕоџгсе ѕгс=”ргб.мерт” фуре=’у14ео/мебт; сойесѕ="үр8, могріѕ" '> 
<ѕоџгсе ѕгс=”ргб.оду” Туре=’у14ео/099; сойесѕ="Еһеога, үогріѕ"'> 
</\14е0> 


Рассмотрим его по порядку. В теге <\14е0> указаны ширина и высота области 
воспроизведения, но не содержится прямой ссылки на видеофайл. Внутри <\14е0> 
три тега <зоигсе>, каждый из которых посредством атрибута згс ссылается на один 
файл и посредством атрибута їуре сообщает браузеру о формате этого файла. Атри- 
бут уре кажется сложным, и, в общем, не напрасно. Он содержит данные трех ти- 
пов: формат контейнера (см. раздел «Видеоконтейнеры» этой главы), видеокодек 
(см. раздел «Видеокодеки» данной главы) и аудиокодек (см. раздел «Аудиокодеки» 
этой главы). 

Начнем с последнего из трех файлов. Видеофайл формата ОСУ — это контейнер 
Ове, который представлен записью \14е0/099 (строго говоря, это МІМЕ-тип ви- 
деофайлов Оре). Использованы видеокодек Тһеога и аудиокодек Уог 5. Здесь все 
достаточно просто, немного смущает лишь способ записи значения атрибута. Пара 
названий кодеков берется в кавычки, следовательно, значение фуре целиком надо 
взять в кавычки другого вида: 


<ѕоигсе згс="ргб.оду" фуре=’м14ео/099; сойесѕ=”Еһеога, могЬ15””> 


Тег <ѕоигсе>, отсылающий к файлу №еЬМ, выглядит схожим образом, но осна- 
щен другим МІМЕ-типом (\14е0/мерм, а не у14е0/099) и отсылает к другому видео- 
кодеку (УР8, а не Тћеога): 


<ѕоигсе згс="ргб.мебт" фуре=’у14ео/мебт; сойесѕ=”үр8, могЬіѕ”’> 


Тег <зоигсе>, отсылающий к файлу Н.264, выглядит существенно сложнее. Если 
помните, я говорил, что Н.264-видео (см. раздел «Н.264» данной главы) и ААС- 
аудио (см. раздел «АЧуапсе4 Аџіо Со4тз» этой главы) существуют в разных «про- 
филях». При кодировании мы пользовались базовым профилем Н.264 и профилем 
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низкой сложности ААС, а затем заключили видео- и аудиопоток в контейнер 
МРЕС-4. Всю эту информацию и несет атрибут іуре: 


<ѕоигсе згс="ргб.тр4" ёуре='үійео/тр4; содес$="аус1.42Е01Е, тр4а.40.2"'> 


Выгода от столь непростой записи в том, что браузер, судя лишь по атрибуту 
фуре, сумеет решить, может ли он воспроизвести тот или иной видеофайл. Если 
браузер сочтет, что задача ему не по силам, он иросто не станет скачивать файл — 
никакую его часть. Это экономия и трафика, и времени: посетители, пришедшие 
на вашу страницу посмотреть видео, увидят его быстрее. 

Если при кодировании видео вы последуете рекомендациям этой главы, то зна- 
чения атрибута уре можно будет просто скопировать из приведенного выше при- 
мера. В ином случае вам придется самостоятельно задавать параметры Туре. 


СЕКРЕТЫ РАЗМЕТКИ 


На момент написания этих строк (20 мая 2010 года) по порядку. Это, к сожалению, означает, что МРА-файл 
была известна ошибка в іРай, из-за которой игнори- следует указывать первым, а уже вслед за ним — 
ровались все видеофайлы-источники, кроме первого файлы открытых форматов. Эх... 


МТМЕ-типы. Целостная картина веб-видео складывается из стольких фрагмен- 
тов, что я даже боюсь их все перечислять. Важно, однако, упомянуть еще один мо- 
мент, связанный с неправильной конфигурацией веб-сервера. Однажды вас может 
весьма озадачить такое явление: на локальном компьютере видеофайлы воспроиз- 
водятся, но стоит их опубликовать на рабочем сайте, как они перестают открывать- 
ся. В таком случае вину надо возлагать, скорее всего, на МІМЕ-типы. 

В главе 1 уже говорилось о МІМЕ-типах (см. раздел «МІМЕ-типы»), но вы, 
вероятно, не уделили этому достаточно внимания. Ну что ж, придется написать 
большими буквами: 


ОЧЕНЬ ВАЖНЫЙ СЕКРЕТ 


ВИДЕОФАЙЛЫ ДОЛЖНЫ ОБСЛУЖИВАТЬСЯ СООТВЕТСТВУЮЩИМИ МІМЕ-ТИПАМИ! 


Что значит «соответствующий» М МЕ-тип, вам уже известно: в качестве тако- 
вого должна выступать часть значения атрибута їуре в теге <ѕоигсе>. Но одного 
лишь значения атрибута їуре в вашем НТМТ-коде недостаточно. Надо убедиться, 
что ваш веб-сервер включает нужный МІМЕ-тип в НТТР-заголовок Сопіепё -Туре. 

Если вы пользуетесь веб-сервером Арасће или одним из родственных ему, мо- 
жете прописать директивы АдаТуре в конфигурационном файле Ира. соп?, действие 
которого распространяется на весь сайт, или в файле с расширением .Пфассез5 
в папке с вашим видео. 


-— ПРИМЕЧАНИЕ 
г При пользовании другим сервером обратитесь к справочной документации. Следует узнать 


^9" из нее, как назначить НТТР-заголовок СощепЕТуре для файлов определенного типа. 
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Вот какие директивы АдаТуре надо добавить: 


АааТуре үїдео/одд .оду 
АааТуре үїдео/тр4 .тр4 
АааТуре үїдео/мерт .мерт 


Первая строка обслуживает видео в контейнере Оре, вторая — видео в контей- 
нере МРЕС-4, а третья — №еЬМ-видео. Вписав их, можно навсегда забыть о про- 
блемах с МІМЕ-типизацией видео. В противном случае в некоторых браузерах 
ваши видеофайлы не будут открываться, даже если указывать МТМЕ-типы в атри- 
бутах їуре в коде страницы. 

За еще более пугающими подробностями конфигурирования веб-сервера от- 
сылаю вас к публикации Центра Мо7Ша для веб-разработчиков под названием 
«Конфигурирование серверов под медиаданные Ове» (Һірѕ://аеуеіорег.то2а.огд/ 
еп/Сопћдигіпа_ѕегуегѕ_ѓог_Одд_тейіа). Советы этой статьи в равной степени при- 
менимы к видео в контейнерах МРА и №УеЬМ. 


А что в ТЕ? 


Ко времени написания книги компания М!сгозой выпустила Іһіегпеё Ехрогег 9 
в «предварительной версии для разработчиков» (4еуеорег ргеме\). Эта версия еще 
не поддерживает НТМІ5-тег <\14е0>, но Масгозой публично пообещала (ҺЁр://Ыо9ѕ. 
птѕап.соту/іе/агсћіме/2010/03/16/һ№ті5-һагауаге-ассеІегаѓеа-йгѕі-іе9-ріаогт-ргеміем-ауаіаЫе- 
Ғог-деуеІорегѕ.аѕрх), что окончательный вариант ГЕ 9 будет поддерживать видео Н.264 
и аудио ААС в контейнере МРЕС-4, подобно За на Масіпѓоѕћ и Мое Ѕаїагі плат- 
формы 105. 

Как же обстоит дело в более старых версиях Іһќегпеё ЕхріІогег, то есть ста- 
бильных версиях до восьмой включительно? Большинство пользователей Ірёегпе? 
ЕхрІогет пользуются также приложением АођБе Е1аѕћ, современные версии ко- 
торого (начиная с 9.0.60.184) поддерживают видео Н.264 и аудио ААС в контей- 
нере МРЕС-4. Таким образом, Н.264-видео, закодированное вами для Ѕаѓагі 
(см. раздел «Кодирование Н.264-видео с помощью НапаВгаКе» этой главы), мо- 
жет быть воспроизведено с помощью видеопроигрывателя на основе Е1аѕћ, если 
система обнаружит, что браузер посетителя не поддерживает НТМТ.5-функцио- 
нальность. 

Во\р1ауег (Һр://омріауег.огд) — видеопроигрыватель на основе Е1аѕћ с откры- 
тым исходным кодом, распространяемый под лицензией СРІ (для него доступны 
и коммерческие лицензии, о которых рассказано по адресу Һ№р://Помріауег.ого/ 
аӢомпіоаа/). О теге <үійео> проигрывателю Е!о\ур!ауег ничего не известно, и магиче- 
ским образом преобразовывать тег <үійео> во Е!азВ-объект он не умеет. Но это лег- 
ко поправимо средствами НТМТ.5, ведь внутрь <\14е0> можно вложить тег <орјесї>. 
Браузеры без поддержки НТМТ.5-видео будут игнорировать тег <үійео> и отобра- 
жать вместо него вложенный <ођјесі>, который, вызывая Е1азВ, будет воспроизво- 
дить видео с помощью Ео\ур|ауег. Браузеры же с поддержкой НТМТ.5-видео оты- 
щут видеофайл-источник и воспроизведут его, тогда как вложенный <063ес{> будет 
полностью проигнорирован. 
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Последнее замечание — ключ ко всему остальному. В НТМТЬ все дочерние 
узлы тега <\14е0>, кроме <зоигсе>, полностью игнорируются. Это позволяет при- 
менять в более новых браузерах НТМТ.5-видео, а в более старых — элегантный 
запасной вариант, ЕІаѕћ. Никаких трюков на ]ауаЗст1рё не требуется. Подробнее 
об этом способе можно прочесть на сайте ВЕр://сатепае$дт.сот/со4е/мео_ог_ 
еуегуБоду в статье «Видео для каждого». 


Живой пример 


Рассмотрим образец, использующий данную технологию. Я дополнил код из ста- 
тьи «Видео для каждого» так, чтобы стало возможным вставить на страницу клип 
в формате \!еБМ. Вот команды терминала для кодирования одного и того же ис- 
ходного файла в три разных формата: 


Ў Тһеога/МогБіѕ/099 
уои@Тоса1ћоѕ$% РҒтредгЕһеога --у1Чеоб1{гафе 200 --тах_$12е 320х240 
- -оиЁриЕ ргб.оду ргб. ам 
#1 Н.264/ ААС/МРА 
уои@Тоса1һћоѕї% НапаВгаКесЕТ --ргезеф “1Рһопе & 1Роа Тоисһ” --\уБ 200 - -міасһ 320 
--1мо-раѕ5 - -Ёигро - -орёітіле --1при® ргб.ау - -оиёриё ргб.тр4 
Ў ҮР8/\Могріѕ ерм 
уои@оса1һоѕї% Ғ?Ғтред -раѕѕ 1 -раѕ5109#і1е ргб.ду -Еһгеайѕ 16 
-океп рагііїіопѕ 4 -а1&ге? 1 -1ад 16 - Кеуіп тіп 0 -9 250 
-тЬ $фаф1с Еһгеѕһо1а 0 -ѕкір +һгеѕһо1а 0 -дтіп 1 -дтах 51 
-1 ргб.ау -усодес 11ірурх ур8 -ап -? гамуійео -у М.Ғ#тред 
- -уіаеобіїгаїе 200 
уои@1оса1һоѕї% ?Ғтред -раѕѕ 2 -раѕ5109#11е ргб.ду -Еһгеайѕ 16 
-океп рагіііопѕ 4 -а1&ге? 1 -1ад 16 -Кеуіп тіп 0 -9 250 
-тЬ $фаф1с Еһгеѕһо1а 0 -5кір Еһгеѕһо1а 0 -дтіп 1 -дтах 51 
-1 ргб.ау -усодес 11ірурх ур8 -Б 204800 -5 320х240 -аѕресї 4:3 
-асоаес могЬ1$ -ас 2 -у ргб.тку 
уои@Тоса1ћоѕ$ ткс1еап --Чосфуре 4 ргб.тку ргб.мебт 


В окончательном коде страницы используется тег <уіїео> для НТМТ5-видео, 
а вложенный в него <орјесї> — для запасного варианта с привлечением Е1аѕћ: 


<үїдео ій="тоу1іе" міаёһ=" 320" һеідһі="240" ргеТоаа сопїго15> 
<зоигсе згс="ргб.тр4" фуре='у1аео/тр4; сойесѕ="аус1.42Е01Е, тр4а.40.2"' /> 
<ѕоигсе згс="ргб.мебт" ёуре='үідео/мерт; сойесѕ="үр8, могріѕ"' /> 
<зоигсе згс="ргб.0оду" фуре='у14ео/099; сойесѕ="Еһеога, үогріѕ"' /> 
<орјесі мійїћ="320" һе19һ="240" ұуре="арр1ісаїтоп/х-ѕһоскмауе-?Таѕһ" 

Чафа=" #омрТауег-3.2.1. 5м" > 

<рагат пате="тоуіе" ма1ие="ҒТомрТауег-3.2.1.5м1" /> 

<рагат пате="а11ом?и115сгееп" ма1ие="Егие" /> 

<рагат пате=" #аѕћмагѕ" үа1ие='соп?ід={ 

"с11ір": { "игі": "Пір: //меагепидй . сот/аіһ5/дооа/рюь 480р.трд4", 

"аиёоРТау" : Ға1ѕе, "аиёоВи?Ғегіпо" :$гие}}' /> 

<р>Скачать видео в формате <а һгеғ="ргб.тр4">МР4</а>, 
<а пге{="ргб .мебт">мебМ</а>, ог 


Для дальнейшего изучения 123 


<а һгеғ="ргб.оду">099</а>.</р> 


</орјесї> 


</\14ео> 


Сочетание НТМТ.5 и Е1аѕЬ позволяет просматривать это видео практически 


в любом браузере на любом устройстве. 


Для дальнейшего изучения 


Ө! 
Ө! 
Ө! 


Тег <\14е0> в спецификации НТМТ. (ћіёр://6іє.Іу/аЗкріа). 

«Видео для каждого» (Һ&р://сатепаеѕідп.сот/сойе/мійео_ѓог_еуегубоау). 
«Элементарное введение в кодировки видеоданных» (ћір://імеіпіотагк.ого/ 
ад/діме). 

«Что следует знать о новом кодеке Тћеога 1.1» (Һр://һаскѕ.то2Ша.огд/2009/09/ 
ћеога-1-1-геІеаѕей/) — статья Кристофера Близзарда (Сһгіѕорһег Віхғага). 


«Конфигурирование серверов под медиаданные Оре» (Һрѕ://Ӣемеіорег.то211а. 
огд/еп/Сопћдигіпо_ѕегуегѕ ѓог_ Одд _теаіа). 

«Кодирование с помощью кодека х264» (Һір://мму.тріауегһа.Һи/роОсѕЅ/НТМІ/епу/ 
тепс-ѓеаї-х264.һті). 

«Свойства разных типов видео» (Һ&р://\мікі.лмуһабмо.ого/\ікі/Міаео уре рагатеїегѕ). 
7епсойег УіЯео ] 5$ (Һір://міаеојѕ.сот) — нестандартные элементы управления 
НТМІ5-видео. 

«Все, что вам нужно знать об аудио и видео в НТМІ 5» (Вр://деу.орега.сот/ 
агісіеѕ/уіем/емегуіћіпо-уои-пееад-ѓо-кпом-абоиЁ-Һёті5-уійео-апа-аџаіо/) — статья Сай- 
мона Питерса (Ѕітор Ріеѓегѕ). 


Вот мы вас 
и нашли! 


Приступим 


Геолокация — это такой вид деятельности, который позволяет определять коорди- 
наты своего местонахождения в мире и при желании делиться ими с друзьями. 
Координаты можно определить несколькими способами: по ІР-адресу, через под- 
ключение к беспроводному Интернету, через ретранслятор сотовой сети, на связи 
с которым находится ваш телефон, или с помощью особого СР$-аппарата, при- 
нимающего спутниковые данные о широте и долготе. 


РАЗМЕТКА В ВОПРОСАХ И ОТВЕТАХ 


Вопрос: Я боюсь геолокации. Можно ли ее выключить? прямо говорится (ёр: //умуму.муЗ.огд/ТА/деоІосаїіоп- 

АРИ#чесиг у): «Пользовательские агенты не должны 
Ответ: Вполне естественно, что при передаче на сервер без явного разрешения пользователя отсылать сайтам 
данных о физическом местонахождении встает пробле- геолокационные сведения». Иными словами, не хоти- 
ма конфиденциальности. В стандарте АРІ геолокации те — не рассказывайте, где вы сейчас. 


АРТ геолокации 


Делиться своим местонахождением с надежными сайтами позволяет АРІ геолока- 
ции. К значениям широты и долготы получает доступ Јауа$сгірї, который сможет 
переслать эту информацию обратно на веб-сервер, а тот, в свою очередь, как-либо 
ее обработает: покажет ваше положение на карте, подыщет вам, чем заняться на 
досуге, и т. д. 

Как можно видеть из табл. 6.1, АРТ геолокации уже поддерживается в некото- 
рых популярных браузерах на десктопных и мобильных платформах. В помощь 
более старым браузерам созданы библиотеки, о которых речь пойдет далее в этой 
главе. 


Таблица 6.1. Поддержка АР! геолокации 


ТЕ Еігеѓох Ѕағагі Сһготе Орега іРһопе Апагоіа 
Е 3.5+ 5.0+ 5.0+ = 3.0+ 2.0+ 
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Кроме стандартного АРІ геолокации, разные мобильные платформы предусма- 
тривают собственные АРІ. О них мы тоже еще поговорим. 


Покажите мне код 


Основополагающим для АРІ геолокации считается новое свойство пауідаїог. 
деоТосаїтіоп глобального объекта пау1дафог. 
Простейшая функция для работы с АРІ геолокации такова: 


Типс® Топ деф Тосаф1оп() { 
пау1датог . део1осаїіоп. де{СиггепРо$141оп($Пом тар); 


} 


Эта функция не проверяет поддержку АРТ, не обрабатывает ошибки и не при- 
нимает никаких параметров. Но в хорошем веб-приложении дело должно обстоять 
совсем наоборот хотя бы с первыми двумя пунктами из названных трех. 

Для тестирования поддержки АРІ геолокации (см. раздел «Геолокация» гла- 
вы 2) воспользуйтесь Моегпіхг: 


Типс® Топ деф Тосаф1оп() { 
11 (Модеги12г. деоТоса1оп) { 
пау1дафог.део] оса топ .деСиггетРо${1оп($Пом тар) ; 
} ее { 
// нет встроенной поддержки, можно попробовать беаг$ 


} 
} 


Что делать, если геолокация не поддерживается, — необходимо решать веб-мастеру. 
Как воспользоваться Сеагѕ в качестве резервного варианта, я скоро расскажу, но перед 
этим надо объяснить, как обрабатывается вызов функции деїСиггепЁРоѕіїіоп(). В на- 
чале этой главы я отметил, что поддержка геолокации не является принудительной. 
Браузер никогда не заставит вас передать на веб-сервер данные о местонахождении 
помимо вашей воли. На вызов функции деїСиггепїРоѕіїіоп() геолокационного АРІ 
различные браузеры реагируют по-разному, но общая логика едина. Так, в Мо7Ша 
Еігеѓох в верхней части окна всплывет «информационная панель». Как она выглядит, 
показано на рис. 6.1. 


(© Чуетюопвьт.огд мапіѕ {о пом, уоцг Іосайоп. [еагп Моге... | Ѕһаге ГосаНоп | [роп 5һаге | Вететьег Рог {5 ѕќе х 


Рис. 6.1. Панель геолокации 


Конечному пользователю эта панель сообщает: 

О что сайт запрашивает его местонахождение; 

О какой именно сайт запрашивает его местонахождение. 
Пользователь может: 


О перейти на справочную страницу Мо7Ша Һ&р://млмм.то2а.сот/еп-ОЅ/йгеѓох/ 
деоіосайоп/, чтобы понять суть происходящего; 
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О разрешить передачу геолокационных данных; 


о 


запретить передачу геолокационных данных; 


О велеть браузеру запомнить выбор (разрешение /запрет), чтобы при последу- 
ющих посещениях того же сайта панель больше не всплывала. 


Кроме того, описываемая панель: 


Ө; немодальна, то есть позволяет переключаться между вкладками и окнами 
браузера; 

О привязана к определенной вкладке, то есть переход к другой вкладке или окну 
браузера заставит ее исчезнуть, а если вернуться на прежнюю вкладку, она 
ВНОВЬ ПОЯВИТСЯ; 


О безусловна, то есть сайт не может ее обойти; 


О блокирует запрос, то есть, пока браузер ожидает вашего ответа, сайт не имеет 
возможности определить ваше местонахождение. 


Выше был показан код на ЈауаЅсгірѓ, в результате обработки которого браузер 
выводит панель. Это функция, принимающая в качестве аргумента пользователь- 
скую функцию обратного вызова $йом тар(). Вызов де СиггепіРоѕіёіоп() обрабаты- 
вается сразу, но доступ к данным о местонахождении пользователя сценарий по- 
лучит не сразу. Когда они будут доступны, к ним прежде всего получит доступ 
функция обратного вызова. Она может выглядеть примерно так: 


#ипсііоп ѕһом тар(роѕііоп) { 

уаг Таїїёиае = роѕіёіоп.соогаѕ. Таіёиае; 

уаг Топоіёиае = роѕііоп.соогаѕ. ТопоіЁиае; 

// покажем вас на карте или сделаем что-нибудь еще! 
} 


Эта функция вызывается с единственным аргументом, который представляет 
собой объект с двумя свойствами: с00га$ и іітеѕёапр. Свойство їітеѕёатр хранит дату 
и время расчета координат. 


яә, ПРИМЕЧАНИЕ 
= — 
я. Поскольку все происходит асинхронно, нельзя точно предугадать момент расчета. Пользо- 


`х 
ых: 4. вателю может потребоваться какое-то время, чтобы прочесть предупреждение и согласить- 
` сяна отсылку геолокационных данных; мобильное устройство с СР5-модулем должно будет 
еще связаться со спутником и т. д. 


У объекта соогіѕ есть несколько собственных свойств: Та 1 иде (широта), 1опоіёиде 
(долгота) и др. Их значения отвечают названиям. Все они в совокупности представ- 
ляют физическое местоположение пользователя в мире. 

Свойства объекта роѕіїіоп показаны в табл. 6.2. 


Таблица 6.2. Свойства объекта ро5юп 


Свойство Тип Комментарий 
соогаѕ.Іаїќиде аоиЫе Десятичные градусы 
соогаѕ.Іопдієиае аоиЫе Десятичные градусы 


Обработка ошибок 
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Свойство 


Тип 


Комментарий 


соога5.аККиае 


соогаѕ.ассигасу 


дочЫе или пи! 


дочЫе 


Метры над поверхностью условного 
эллипсоида Земли 


Метры 


соога.аККидеАссигасу 


дочЫе или пи! 


Метры 


соогаѕ.ћеааіпо 


дочЫе или пи! 


Градусы по часовой стрелке от направле- 
ния на север 


соогаѕ.ѕрееа 


дочЫе или пи! 


Метры в секунду 


Чтезатр 


РОМТите${атр 


Как объект Оаѓе() 


Гарантированно определены только три координатных свойства: соога. 1аїіїисе, 
соога . Топоіїиде и соогаӣѕ .ассигасу. Представление остальных (пи11, если не опреде- 
лены) зависит от возможностей клиентского компьютера и сервера позициониро- 
вания, с которым тот связывается. Свойства һеайіпо и зреед могут быть вычислены 
лишь тогда, когда известно предыдущее положение пользователя. 


Обработка ошибок 


Геолокация — это непростая система, в которой того и гляди что-нибудь не зала- 
дится. Уже говорилось о проблеме запроса согласия пользователя. Если страница 
запрашивает координаты пользователя, а пользователь не хочет их сообщать, веб- 
мастер будет посрамлен, потому что пользователь всегда прав. Каким же образом 
реализовать в коде обработку ошибок? Для нее предназначен второй аргумент 
функции деЕСиггепЕРоѕіїіоп() — это тоже функция обратного вызова: 


пау1дафог.део] оса 1оп.деСиггептРо${1оп($Пом тар, Папе еггог) 


Если что-то не в порядке, функция обработки ошибок будет применена к объ- 
екту РоѕіїіопЕггог. Его свойства перечислены в табл. 6.3. 


Таблица 6.3. Свойства объекта РоѕіїіопЕггог 


Свойство Тип Комментарий 
соде Поп Код ошибки (порядковый номер) 
теѕѕаде ромМ5ігіпо Не для конечных пользователей 


Свойство соде принимает одно из четырех значений: 


О РЕВМТ$5ТОМ РЕМТЕО (1) — если пользователь нажмет кнопку боп“ Ѕћаге (Не сооб- 
щать) на панели геолокации или иным способом запретит доступ к данным 
о своем местонахождении; 


О РОЅІТІОМ ОМАУАТАВІЕ (2) — если не работает сеть или невозможно связаться со 
спутником позиционирования; 


О ПМЕОШ (3) — когда сеть работает, но на расчет координат уходит слишком мно- 
го времени (что значит «слишком много», вы узнаете в следующем разделе); 


О \\КМОММ ЕВВОК (0) — если проблема в чем-то другом. 
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Пример: 


Ғипсёіоп папа]е_еггог(егг) { 


} 


і? (егг.соде == 1) { 


} 


// воля пользователя — закон для меня! 


Вопрос: Будет ли АР! геолокации работать на Между- 
народной космической станции, наЛуне, на других пла- 
нетах Солнечной системы? 


Ответ: Спецификация (6р: //\мумму.му3..ог9/ТК/деоіо- 
сайоп-АРІ/#соогаіпаїеѕ_іпїегѓасе) гласит: «Эталонная 
система географических координат, используемая 
ватрибутах этого интерфейса, — Мировая геодезиче- 
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РАЗМЕТКА В ВОПРОСАХ И ОТВЕТАХ 


ская система [16584] с двухмерными координатами. 
Другие системы не поддерживаются». Поскольку МКС 
облетает Землю по орбите, местоположение космо- 
навтов на станции (Вр:/Ами ет. сот/Аз{го _Т)) описы- 
вается широтой, долготой и высотой. Но, будучи ори- 
ентированной на координатную сеть Земли, Мировая 
геодезическая система неприменима к Луне и другим 
планетам. 


Требую выбора! 


Такие популярные мобильные устройства, как 1РБопе и Апаго 4, поддерживают 
два способа определения координат. Первый способ — триангуляция, основанная 
на оценке расстояний до нескольких башен-ретрансляторов вашего сотового опе- 
ратора. Это быстрая процедура, для которой не нужно никакого специального 
СР5-оборудования, но ее точность оставляет желать лучшего. В зависимости от 
того, сколько ретрансляторов находится поблизости, ваше местонахождение мо- 
жет быть установлено с точностью до квартала (если их много) или до одного-двух 
километров (если их мало). 

Другой способ состоит в том, что СР$-модуль вашего мобильного устройства 
связывается с находящимися на околоземной орбите спутниками СР$-позицио- 
нирования. Как правило, СР5 позволяет определить местонахождение с точностью 
до нескольких метров. Обратная сторона медали — чрезвычайно высокое энерго- 
потребление СР5-чипов. На мобильном устройстве общего назначения такой мо- 
дуль, как правило, по умолчанию выключен и включается лишь при необходимо- 
сти. Вот почему инициализация связи с СР5-спутником требует некоторого 
времени. 

Если вам когда-либо приходилось открывать Карты бооде на іРћопе или другом 
смартфоне, то оба способа вам уже знакомы. Сначала на карте появляется большой 
круг (окрестность ближайшей башни-ретранслятора), затем он уменьшается (три- 
ангуляция по другим башням) и наконец стягивается в точку (координаты, полу- 
ченные с СР5-спутника). 

Я рассказываю об этом потому, что не каждое веб-приложение нуждается в вы- 
сокой точности координат. Так, например, если пользователь ищет, какой бы ему 
фильм посмотреть в одном из окрестных кинотеатров, хватит «приблизительных» 
координат, ведь даже в больших городах кинотеатров не так много и так или иначе 
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система должна будет вывести афиши всего нескольких из них. С другой стороны, 
для пошагового инструктирования в реальном времени нужна самая высокая точ- 
ность. Иначе невозможно будет сказать пользователю: «Пройдя 20 метров, свер- 
ните направо» и т. п. 

У функции деЕСиггепїіРоѕіїіоп() есть необязательный третий аргумент — объект 
РоѕіїіопОрііопѕ. В нем можно устанавливать значения трех свойств (табл. 6.4). 
Свойства объекта Ро$1{1оп0р1оп$ тоже необязательны. 


Таблица 6.4. Свойства объекта РоѕіїіопОрііопѕ 


Свойство Тип По умолчанию Комментарий 
епаеНюНАссигасу | бооіеап Ғаіѕе Установка {гие может 
замедлить работу 
ЯЧтеоц Іопд (не установлено) В миллисекундах 
тахітитАде Іопд 0 В миллисекундах 


Если функциональность устройства позволяет рассчитывать точные координаты, 
а пользователь согласен делиться ими, то их пересылку на сервер можно включить, 
установив для свойства епар1енідћАссигасу значение їгие. На смартфонах іРћопе 
и Апаго4 доступ к «низкоточному» и «высокоточному» позиционированию разделен, 
поэтому возможно, что вызов деїСиггепЕРоѕіїїоп( ) при епар1еніоћАссигасу : {гие выдаст 
ошибку, а при епаб1енНідћАссигасу: Ға1ѕе пройдет успешно. 

Свойство ііпеоиї определяет длительность промежутка (в миллисекундах), в те- 
чение которого ваше веб-приложение будет ждать присылки координат. Отсчет 
времени начинается с того момента, когда пользователь разрешает браузеру пере- 
дать сведения о своем местонахождении. Таким образом, мы ограничиваем во вре- 
мени не пользователя, а сеть. 

Свойство тах1титАде позволяет устройству сразу отсылать кэшированные дан- 
ные о координатах. Так, например, пусть ваша страница вызвала деЕСиггепїРоѕ1їіоп() 
в первый раз, пользователь согласился и ваша первая (на случай успеха) функция 
обратного вызова применяется к координатам, вычисленным ровно в 10:00 утра. 
Допустим, через минуту после этого, в 10:01, вы снова вызываете деїСиггепіРоѕіёіоп(), 
на этот раз с присвоенным атрибуту тахітитАде значением 75000: 


пауідатог .оео1осаїіоп.деЕСиггепЕРоѕіїтоп( 
ѕиссеѕ5 са11раск, еггог са11баск, {тахітитАде: 75000}); 


Написав так, вы заявляете, что собственно нынешнее местонахождение пользо- 
вателя вам знать не обязательно; достаточно узнать, где он находился 75 секунд 
(75000 миллисекунд) назад. В данном случае устройство помнит, где пользователь 
был 60 секунд (60000 миллисекунд) назад: координаты вычислялись при первом 
вызове деіСиггепЕРоѕіїіоп(). Поскольку эти сведения не старше оговоренного сро- 
ка давности, система не выполняет повторный расчет координат, а возвращает те 
же самые данные, что и в первый раз: широту, долготу, точность, метку времени 
(10:00 утра). 

Итак, прежде чем запрашивать пользователя о его местонахождении, задумай- 
тесь о том, какая вам нужна точность данных, и, если это необходимо, включите 
епарТенНідһАссигасу. Если местонахождение пользователя надо будет определять 
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несколько раз, продумайте целесообразный срок давности сведений и установите 
соответствующий тахіпипАде. В том случае, если за положением пользователя надо 
следить непрерывно, функция деЁСиггепїРоѕіїіоп() вам не подойдет. Надо приме- 
нить маёсһРоѕіїіоп(). 

У маїсһРоѕіііоп() та же структура, что и у деЕСиггепїРоѕіїіоп(). В качестве 
аргументов она принимает две функции обратного вызова: одну обязательную 
(на случай успешного вызова) и одну необязательную (на случай ошибки), а не- 
обязательный третий аргумент — объект Роѕіїіоп0рііопѕ, со свойствами которо- 
го вы познакомились ранее. Разница в том, что ваша функция обратного вызова 
будет выполняться каждый раз, когда местонахождение пользователя изменит- 
ся. Активным образом «опрашивать» аппарат пользователя нет необходимости: 
он сам определит удобный интервал «опроса» и будет запускать первую из двух 
функций обратного вызова каждый раз после того, как координаты пользовате- 
ля изменятся. Можно применять маёсћрРоѕіііоп() для отображения движущегося 
маркера на карте, построения маршрута в реальном времени и т. д. по вашему 
усмотрению. 

Функция маїсһроѕіїіоп() возвращает число, которое вы, вероятно, посчитаете 
нужным где-то хранить. Чтобы прекратить слежение за координатами пользова- 
теля, достаточно вызвать метод с1еагиаїсћ( ) и передать ему это число. В результа- 
те аппарат пользователя прекратит запускать функцию обратного вызова. Если 
вам когда-либо приходилось применять функции ѕеЁ1піегуа1() и с1еагІпїегуа1() 
в ]ауазсг!рь, знайте, что здесь механизм точно такой же. 


А что в ТЕ? 


АРІ геолокации, стандартизованный МЗС (см. раздел «АРІ геолокации» этой гла- 
вы), не поддерживается в ГПбегпеё ЕхрІогег. Но не спешите отчаиваться! Сеагѕ 
(Һір://ќоо/ѕ.доодіе.сот/деагѕ/) — разработанное Соорв1е браузерное расширение с от- 
крытым исходным кодом, функционирующее на платформах М№іпожѕ, Мас ОЗ Х, 
Тіпих, МірӢоуѕ Мое и Апаго4. Оно эмулирует в старых браузерах некоторые 
из новых функций, в частности АРІ геолокации. Этот интерфейс отличается от 
стандартизованного ҰЗС, но служит тем же целям. 

Раз уж мы заговорили о наследуемой функциональности платформ, отмечу, что 
мобильные аппараты, построенные на платформах ВІасКВеггу, Моча, Рат и ОМТР 
ВОМПТ, имеют собственные АРІ геолокации. Разумеется, все эти прикладные ин- 
терфейсы отличаются от интерфейса Сеагѕ, который, в свою очередь, отличается 
от \/3С АРГгеолокации. Как же быть?.. 


На помощь спешит део.јѕ 


Сценарий део. јѕ (НЁр://соде.дооде.сот/р/део-саНоп-дамазсирУ/) — это ЈауаЅсгірі- 
библиотека, распространяемая под лицензией МПТ с открытым исходным кодом. 
Она позволяет сглаживать различия между МЗС АРГгеолокации, АРІ приложения 
Сеагѕ и разнообразными АРІ мобильных платформ. Чтобы воспользоваться 960. јѕ, 
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надо поместить в нижнюю часть страницы два сценария (строго говоря, их можно 
поместить в любую часть страницы, но если внедрить их в контейнер <пеад>, стра- 
ница будет загружаться медленнее, так что не делайте этого). 

Первый из этих сценариев — деагѕ іпії. јѕ (Һ№р://соде.доодіе.сот/аріѕ/деагѕ/ 
деагѕ іпі.јѕ), инициализирующий Сеагѕ, если это расширение установлено. Второй — 
део. јѕ (Һр://део-Іосайоп-јауаѕсгірї.доодіесоае.сот/ѕуп/ёгипк/јѕ/део.јѕ). Код страницы 
должен выглядеть приблизительно так: 


<1рОСТҮРЕ ћїіт1> 
<піт1> 
<һеад> 
<тефа сһагѕеё="иЁҒ-8"> 
<іііЛе>Название моей страницы</1Те> 
</һеад> 
<роду> 


<Ѕсгірї ѕгс=”деагѕ іпії. ј5”></5сгірї> 
<Ѕсгір ѕгс=”део. ј5”></5сгірі> 
</роду> 
</пт1> 


Теперь вы готовы к использованию любого из доступных АРІ геолокации: 


і? (9е0_роз1%10п_$.1и18()) { 
део_роз11оп_35.9еСиггеп Роз 1оп(9ео_зиссезз, део еггог) ; 
} 


Разберем этот код по порядку. Сначала надо явным образом вызвать функцию 
1116). Если поддерживается и доступен хотя бы один АРІ геолокации, функция 
возвратит їг0џе: 


1Е (ео роѕіёіоп 5.110) { 


Вызвав функцию іпії(), мы не устанавливаем местонахождение пользователя, 
а только удостоверяемся, что это возможно сделать. Чтобы перейти к делу, вызовем 
функцию деїСиггепіРоѕііоп(): 


део роѕіїіоп јѕ.деїСиггепЁРоѕіЄіоп(део ѕиссеѕ5, део_еггог); 


При вызове деіСиггепЕРоѕіїіоп() браузер спросит пользователя, можно ли рас- 
считать и передать на сайт его координаты. В частности, при геолокации с по- 
мощью Сеагѕ появится окно с вопросом, разрешает ли пользователь сайту при- 
бегнуть к функциональности Сеагѕ. При встроенной поддержке АРІ геолокации 
в браузере окно будет выглядеть иначе (например, в Бігеѓох 3.5, как вы уже виде- 
ли, появляется информационная панель в верхней части страницы). 

Функция деїСиггепЕРоѕіїіоп() принимает в качестве аргументов две функции 
обратного вызова. Если с помощью деїСиггепЕРоѕіїіоп() местонахождение пользо- 
вателя было успешно найдено (то есть пользователь согласился на передачу дан- 
ных и АРІ геолокации благополучно исполнил запрос), то выполняется первая из 
переданных функций. В данном примере она называется део 5иссеѕѕ: 


део роѕіїіоп јѕ.деїСиггепіРоѕіїіоп(део ѕиссеѕѕ, део еггог) ; 


132 Глава 6. Вот мы вас и нашли! 


Эта функция обратного вызова, обслуживающая ситуацию «успеха», принима- 
ет единственный аргумент — объект с информацией о местонахождении: 


Типс Той део ѕиссеѕѕ(р) { 
ајегі("Вы нашлись в точке с долготой " + р.соогаѕ.1аїіїиде + 
"и широтой " + р.соогаѕ .Топодіёиде); 


Если функция деЕСиггепЕРоѕіїіоп() не сумела установить координаты пользо- 
вателя (из-за того что он отказался посылать их, или из-за какого-либо сбоя в АРІ 
геолокации), то будет вызвана функция, переданная ей как второй аргумент. В дан- 
ном примере функция обратного вызова, обслуживающая ситуацию «неудачи», 
называется део еггог: 


део роѕіїлоп јѕ.деїСиггепіРоѕіїіоп(део ѕиссеѕѕ, део егғог) ; 
Она не принимает никаких аргументов: 


Ғипсёіоп део еггог() { 
ајегі("Вы не нашлись!" ); 


} 


Поддержки функции мафсиРо$1101() в део. јѕ пока нет. Чтобы постоянно следить 
за местонахождением пользователя, надо активным образом «опрашивать» его 
устройство, вызывая деїСиггепЕРоѕіїіоп(). 


Живой пример 


Изучим следующий пример использования део. јѕ для нахождения координат 
пользователя и вывода на экран карты местности, в которой он находится. 

При загрузке страницы надо вызвать део роѕіїіоп јѕ.іпії(), чтобы выяснить, 
доступен ли хотя бы один интерфейс геолокации из тех, которые поддерживает 
део. јѕ. Если АРТ доступен, то можно вывести ссылку, щелкнув на которой, поль- 
зователь сможет увидеть свое местоположение на карте. Переход по ссылке будет 
вызывать функцию 1оокир ЛосаЁіоп() следующего вида: 


Ғипсёіоп 1оокир Тосаёіоп() { 
део роѕіїіоп јѕ .деЕСиггепіРоѕіёіоп(ѕћом тар, ѕћом тар еггог) ; 


} 


Если пользователь соглашается на пересылку данных, а геолокационному сер- 
вису удается установить его координаты, то део. јѕ запустит первую функцию об- 
ратного вызова — 5ћом тар() — с единственным аргументом 10с. Свойство соогӣѕ 
объекта 1ос содержит широту, долготу и сведения о точности измерений (в этом 
примере точность измерений не учитывается). Затем функция ѕћоп пар() с помо- 
щью АРІ Карты Соодіе выводит на страницу карту с маркером: 


Ғипсёіоп ѕһом тар(1ос) { 
$("#9ео-мгаррег").с$$({ 'міаёһ': '320рх', 'Нетай' : '350рх'}); 
уаг тар = пем СМар2 (аоситет .дегЕТетепЕВута( "део-мгаррег")); 
уаг сепбег = пем Сат по(Тос. соогаѕ .Таїіїиде, Лос. соогаѕ. Топоіёиде); 
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тар. зе Сепфег(сепфег, 14); 

тар. а99Соп® го] (пем @$та1ТМарСопфго1 ()); 

тар. а99Соп® го] (пем СМарТуреСопфго1()); 

тар .адад0уег1ау(пем СМагкег(сепёег, {агаддаБТе: Ға1ѕе, їіїЛе: "Вы нашлись 
приблизительно здесь" })); 


Если део. јѕ не может определить местоположение пользователя, будет вызвана 


вторая функция обратного вызова — $Пом тар еггог(): 


Ғипсёіоп ѕһом тар еггог() { 


} 


$("#11уе-деоТосаіоп" ).һіт1('Вы не нашлись! '); 
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Ө! 
Ө! 
Ө! 


Стандарт АРІ геолокации на сайте МЗС (Һќр://ллм.м3.огд/ТВ/деоіосайоп-АРІ/). 

Сеагѕ (Һр://0015.доодіе.сот/деагѕ/). 

АРІ геолокации платформы ВІасКВетгу (Һр://ммм.Ёопурипсе.сот/2008/05/08/ 
Віаскбеггу-Вгомѕег-Атр-СР5.аѕрх). 

АРІ геолокации платформы Мова (Һр://\ікі.Ғогит.поКіа.соту/іпаех.рһр/Вопаї_ 
МЛаде _ройта_ехатр/е_-_деоосаНоп_АРТ). 


АРІ геолокации платформы Ра|т (Һір://аеуеіореграіт.соту/іпаех.рһр?оріоп=сот _ 
сопїепіёуіеу=агіісіе&іа=1673#С6Р5-деСиггепїіРоѕіїйоп). 


АРІ геолокации платформы ОМТР ВОМПТ (ћ&р://бопаі.отір.ого/1.0/аріѕ/ 
деоіосаїйоп.Һті). 


део. јѕ — сценарий-обертка для разных геолокационных АРІ (И&р://соде.дооде. 
соту/р/део-Іосайоп-јауаѕсгірї/). 


Локальное хранилище: 
прошлое, настоящее, 


будущее 


Приступим 


Постоянное локальное хранилище данных — одна из областей, в которой обычные 
клиентские приложения традиционно имели преимущество перед веб-приложениями. 
Для первых операционная система, как правило, предоставляет такой уровень аб- 
стракции, где можно хранить собственные данные приложений (например, пользо- 
вательские настройки и состояние) и откуда эти данные можно запрашивать. В каче- 
стве хранилища могут выступать реестр, ПМ -файлы, ХМТ-файлы или что-либо еще 
взависимости от правил системы. Если клиентская программа нуждается в хранении 
данных иного типа, нежели пары «ключ — значение», то можно встроить в нее (про- 
грамму) свою собственную базу данных, придумать собственный формат файлов или 
реализовать какое-либо из других возможных решений. 

Всей этой роскошью веб-приложения исторически не располагали. СооКіеѕ 
были изобретены довольно рано, и в роли постоянного локального хранилища для 
небольших порций данных они, конечно, могут применяться. Ноу них есть не- 
сколько неприятных особенностей. 


О СооКіеѕ входят в состав каждого НТТР-запроса и поэтому замедляют работу 
вашего веб-приложения, которое вынуждено снова и снова бесцельно переда- 
вать одни и те же данные. 


О Поскольку сооКіеѕ входят в состав каждого НТТР-запроса, они посылают дан- 
ныечерез Интернет в незашифрованном виде (если только все веб-приложение 
не шифруется с помощью $51.). 


О Пообъему сооКіеѕ ограничены приблизительно 4 Кбайт. Этого достаточно, что- 
бы замедлить работу приложения (см. выше), но недостаточно, чтобы принести 
взамен какую-либо ощутимую выгоду. 


Нам нужно совсем другое, а именно: 
большое по объему хранилище... 
на клиентской стороне... 


данные которого не меняются при обновлении страницы... 


оооо 


и не передаются на сервер. 
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Известно о нескольких попытках воплотить этот идеал, но до недавнего време- 
ни все они оказывались в конечном счете неудачными — и притом по-разному 
неудачными. 


Краткая история прототипов локального 
хранилища до НТМЕ5 


Вначале было не Слово, а Пиегпеё Ехрогег. По крайней мере разработчики М1сгозо 
хотят, чтобы все думали именно так. Надо отдать должное специалистам МісгоѕоЁс: 
во время первой из «великих войн браузеров» они придумали множество новинок, 
которые и включили в свой браузер-победитель Іпќегпеё Ехр|огег. Одна из новинок 
называлась ОНТМІ. ВеБау1огз; в числе форм «поведения» браузера была одна под 
названием ЦзегОафа. 

Форма 0зегОафа разрешает веб-страницам хранить до 64 Кбайт данных на каждый 
домен в иерархической структуре на основе ХМГ.. (Доверенные сайты, в частности 
интранет-сайты, могут хранить в десять раз больше данных. Да-да, еще недавно счи- 
талось, что 640 Кбайт хватит всем и на любые нужды!) Никакого диалога об увели- 
чении объема хранимых данных ТЕ вести не умел, поэтому способа расширить хра- 
нилище не существовало. 

В 2002 году специалисты АЯође ввели во Е1аѕћ 6 функцию, которая была неудач- 
но и обманчиво названа Еаѕћ-сооКіеѕ. В среде Е1аѕЬ эта функция известна под на- 
званием Г.оса| ЗВаге4 Ођјесёѕ (распределенные локальные объекты, или 1.50). Если 
говорить кратко, то Г.5О позволяет Еаѕћ-объектам хранить до 100 Кбайт данных 
на каждый домен. В 2005 году Брэд Ньюберг (Вга МеџБеге) разработал прототип 
системы взаимодействия Е1аѕһЬ с ]ауабсг!рь, которая получила название АМАЅЅ 
(АЈАХ Маѕѕіуе Збогаве Зузбет). Некоторые конструктивные особенности Еаѕћ 
ограничивали работу АМА$5, но уже в 2006 году, после появления ЕхќегпаПпќегѓасе 
во ЕІаѕЬ 8, оперировать 1.50 с помощью ЈауаЅсгірё стало на порядок легче и бы- 
стрее. Тогда Брэд, переписав АМА$5, ввел ее в состав популярного набора инстру- 
ментов Оо]о ТооЇКі под названием йојох. ѕіогаде. При использовании йојох. ѕіогаде 
каждый домен может безвозмездно получить от Е1аѕћ стандартные 100 Кбайт на 
хранение данных. Более того, пользователь может последовательно увеличивать 
объем хранимых данных на порядок (до 1 Мбайт, затем до 10 Мбайт ит. д.). 

В 2007 году компания Соове создала Сеагѕ — браузерное расширение с открытым 
исходным кодом, придающее браузерам дополнительную функциональность (говоря 
об АРТгеолокации в Пщегпеё ЕхрІогег, я уже упоминал Сеагѕ: см. раздел «А что в ГЕ?» 
главы 6). Сеагѕ предоставляет АРІ для встроенной базы данных на основе 5О11ќе. 
Один раз получив согласие пользователя, Сеагѕ сможет хранить неограниченное ко- 
личество данных для каждого домена в таблицах базы данных ЗОГ. 

Тем временем Брэд Ньюберг и его коллеги продолжали работать над 40д0х. 
ѕіогаде. Их целью было обеспечить единый интерфейс для всех существующих 
приложений и АРІ. Уже к 2009 году система йојох.ѕїогаде была способна автома- 
тически распознавать (и оснащать единым интерфейсом доступа) АдоБе ЕІаѕћ, 
Сеагѕ, А4оБе АТВ и один прообраз хранилища НТМІ5, реализованный только 
в старых версиях Еігеѓох. 
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Читая обо всех этих решениях, вы наверняка подметили некую закономерность: 
каждое из них или привязано к какому-то одному браузеру или зависит от сторонне- 
го приложения. Несмотря на героические усилия команды йојох.ѕЕогаде по наведению 
мостов, все имеющиеся альтернативы радикально различны по своим интерфейсам, 
имеют разные ограничения на объем хранимых данных и по-разному взаимодейству- 
ют с пользователем. Итак, в НТМІ5 должна была быть решена проблема следующе- 
го вида: нужно создать стандартный АРІ, полная поддержка которого без опоры на 
сторонние приложения была бы реализована в нескольких браузерах. 


НТМЕ5-хранилище: вводный курс 


Рассматриваемое здесь НТМТ.5-хранилище, описано в спецификации №ер Зфогазе, 
которая одно время являлась частью спецификации НТМІ5, но затем была выде- 
лена в особую спецификацию (по причинам политического характера, неинтерес- 
ным для нас). Некоторые разработчики браузеров пользуются терминами «локаль- 
ное хранилище» и «ООМ-хранилище». Ситуацию с названием еще осложняют 
родственные развивающиеся стандарты, названные схожим образом; я скажу о них 
далее в этой главе. 

Что же такое НТМТ.5-хранилище? Если говорить просто, то это способ хранить 
создаваемые веб-страницами именованные пары «ключ — значение» локально, 
в клиентской программе, то есть в браузере. Эти данные, как и сооКіеѕ, будут хра- 
ниться даже после того, как пользователь покинет сайт, закроет вкладку браузера 
или вообще выйдет из браузера и пр. Но, в отличие от сооКіеѕ, эти данные никогда 
не пересылаются на удаленный веб-сервер, если только сам пользователь не по- 
желает отправить их вручную. В отличие от более ранних образцов постоянного 
локального хранилища, о которых идет речь в предыдущем разделе, нынешняя 
технология встроена в браузеры и доступна без сторонних приложений. 

Уместен вопрос: в каких браузерах поддерживается НТМТ.5-хранилище? 
В табл. 7.1 показано, что таковы последние версии всех основных браузеров. 
Среди них даже Іаќегпеё ЕхріІогег! 


Таблица 7.1. Поддержка НТМЕ5-хранилища 


ІЕ Еігеѓох баѓагі Сһготе Орега їЇРһопе Апагоіа 
8.0+ 3.5+ 4.0+ 4.0+ 10.5+ 2.0+ 2.0+ 


В коде на ЈауаЅсгірё доступк НТМТ.5-хранилищу обеспечивает объект 1оса15огаде 
глобального объекта м1пдом. Прежде чем пользоваться технологией, убедитесь, что 
браузер поддерживает ее (см. раздел «Локальное хранилище» главы 2): 


Ғипсёіоп ѕиррогіѕ һіт15 ѕіогаде() { 
геёигп ('"Тоса15соғаде' іп міпдом) 8& міпаом['Тоса15№огаде' ] !== пи11; 


} 


Чтобы не писать собственную функцию для тестирования поддержки НТМТ.5- 
хранилища, прибегните к помощи Мойегпіхг (см. раздел «Мойегпіхг: библиотека 
для тестирования НТМТ5-функций» главы 2): 
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1Е (Модегпігг.1оса1ѕїогаде) { 
// хранилище доступно! 
} ее { 
// встроенной поддержки хранилища нет, 
// стоит попробовать 4040ох.$фогаде или иное стороннее решение 


} 


Использование НТМІ5-хранилища 


В основе НТМГ5-хранилища лежат именованные пары «ключ — значение». Вы со- 
храняете данные под именованным ключом, а затем по тому же ключу система 
будет возвращать вам эти данные: 


1ибегРасе 5%$огаде { 
де ег апу че Г{ет(1и ВОМЅїгіпд Кеу) ; 
зе {ег сгеафог үоіа зе Гет(1и ООМ$г1ид Кеу, іп апу даїа); 


| 


Сам именованный ключ — обязательно строка. Данные, сохраняемые под клю- 
чом, могут быть любого типа, поддерживаемого ]ауаЗст!рё: строки, логические зна- 
чения, целые числа, числа с плавающей запятой. Впрочем на самом деле любые 
данные хранятся в виде строк. Если вы сохраняете и извлекаете не строки, то для 
перевода извлеченных данных в ожидаемый Јауа$сгірі-тип надо будет пользовать- 
ся функциями рагѕеїпї(), рагѕеР1оаї() и им подобными. 

При вызове ѕе Цепт() с именем ключа, которому уже присвоено какое-либо зна- 
чение, это значение будет заменено новым. Если вызвать деї1+ет() с несуществу- 
ющим ключом, то система не возбудит исключение, а возвратит пи11. 

Объект Тоса15їогаде, подобно некоторым другим объектам ЈауаЅсгірё, можно 
рассматривать как ассоциативный массив. Это значит, что вместо методов деї бет) 
и зе Цет() разрешается пользоваться квадратными скобками. Рассмотрим, напри- 
мер, следующий фрагмент кода: 


уаг Тоо = Тоса15іогаде. чей Г{ет( "Баг"); 
1 
Тоса151огаде. ѕеЕІёет( "Баг", Ғоо); 


Если применить синтаксис с квадратными скобками, то этот фрагмент примет 
следующий вид: 


уаг Тоо = Тоса15Еогаде[“Баг”]; 
Ге 
]Лоса15фогаде[“Баг”] = Тоо; 


Есть также методы, позволяющие удалять значения именованных ключей и во- 
обще очищать хранилище (то есть сразу удалять все ключи и значения): 


іпгегҒасе Ѕїогаде { 
аеТеїег уо14 гетоуеТтет(іп рОМЅ5ігіпо Кеу) ; 
үоіа сТеаг(); 


} 
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Если применить гепоуе1їеп() кнесуществующему ключу, то ничего не произой- 
дет. 

Наконец, имеется свойство, позволяющее узнавать общее количество значений 
в хранилище и перебирать все ключи по индексу (то есть определять имя каждого 
ключа): 


іпіегҒасе Ѕіогаде { 
геадоп1у аёЕг1рите ипѕідпеа Топо Тепоїћ; 
дегег ВОМЅгіпд Кеу(іп ипѕ1ідпеа Топо іпаех) ; 


|: 


Если при вызове Кеу() индекс лежит не в диапазоне от 0 до 1епоіћ-1, то функция 
вернет п011. 


Следим за состоянием НТМЕ5-хранилища 


Если вашей программе нужно следить за изменениями в состоянии хранилища, то 
она должна реагировать на событие ѕЕогаде. Событие ѕіогаде объекта м1пдом проис- 
ходит, когда после вызова $е{ Цет( ), гепоуеІ+ет( ) или с1еаг() что-либо в хранилище 
меняется. Так, если вы вновь присвоили ключу уже закрепленное за ним значение 
или вызвали с1еаг() в момент, когда хранилище пусто, ѕїогаде не сработает, потому 
что в области хранения ничего не изменилось. 

Событие ѕіогаде поддерживается везде, где поддерживается объект Лоса15&огаде, 
тоесть и в П\егпеё Ехр|огег 8. Нов ТЕ 8 не реализован стандарт \/ЗС адЕмей іѕёепег 
(который, правда, будет наконец-то добавлен в ІЕ 9). Значит, чтобы ваш код пере- 
хватывал событие ѕіогаде, надо узнать, какой механизм работы с событиями под- 
держивает браузер'. Это можно сделать так: 


1 (міпаом. ад9Емей 1 $фепег) { 

міпаом. аддЕуепі їѕепег("ѕїогаде", папаТе_ ѕіоғаде, Та1зе); 
} е1ѕе { 

міпдом.асасһЕмепї ( "опзфогаде", папаТе_з$огаде); 


у 


Функция обратного вызова Пап] е_з{огаде будет применена к объекту 5фогадеЕмеп®, 
ав Пщегпеё Ехр|огег — к хранящему события свойству и1ипдом. ехепї: 


Типс Той һапа1е ѕіогаде(е) { 
1Е (!е) { е = м1идом.еуеит; } 


} 


После выполнения этого фрагмента кода переменная е станет объектом ЅЕогаде- 
Еуеп®. Его полезные свойства перечислены в табл. 7.2. 


Подготовленный читатель, который уже знает, как перехватывать события, может про- 
пустить весь этот раздел. Перехват события ѕќогаве работает стандартным образом. 
В частности, если для регистрации обработчиков событий вы пользуетесь јОпегу или 
какой-либо другой библиотекой ]ауаЗст!рь, то их возможности можно распространить 
и на $6огазе. — Примеч. авт. 
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Таблица 7.2. Свойства объекта ЅїогадеЕуепї 


Свойство | Тип Описание 
кеу Строка Имя ключа, значение которого было добавлено, удалено или изменено 
оіа№аіџе Любой Предыдущее значение ключа (если удалено, изменено) или пи! 
(если добавлено новое значение) 
пеум\аіие | Любой Новое значение ключа (если добавлено, изменено) или пи! 
(если значение удалено) 
ип“ Строка Адрес страницы, которая вызвала метод, изменивший состояние 
хранилища 


Свойство иг| первоначально называлось игі. Прежде чем спецификация изменилась, 
некоторые браузеры поддерживали именно его. Чтобы обеспечить наилучшую совме- 
стимость, проверьте, существует ли свойство иг]. Если его не окажется, то выясните, 
определено ли свойство игі. 


Событие ѕїогаде невозможно отменить, и сама функция обратного вызова 
папа1е_зтогаде никак не может предотвратить изменение. Браузер таким образом 
просто говорит нам: «Вот тут что-то случилось. Теперь уже ничего не поделаешь, 
но я решил вас поставить в известность». 


Ограничения в современных браузерах 


Говоря о прототипах локального хранилища (см. раздел «Краткая история прото- 
типов локального хранилища до НТМІ 5» этой главы), использующих сторонние 
приложения, я упомянул об ограничениях, свойственных каждому из этих механиз- 
мов: объем хранимых данных и т. п. Однако пока ничего не было сказано о функ- 
циональных ограничениях НТМТ.5-хранилища, ставшего стандартным. 

По умолчанию каждый домен имеет 5 Мбайт памяти на хранение данных. Уди- 
вительно, с каким единодушием браузеры сошлись на этой величине, которая в спе- 
цификации НТМТ. всего лишь рекомендательна. Надо помнить, что хранимые 
данные имеют строковый тип, а не исходный. Эта разница в представлении стано- 
вится явной, например при хранении большого количества целых чисел или деся- 
тичных дробей. Каждый разряд числа с плавающей запятой хранится не обычным 
для таких чисел образом, а как символ. 

При превышении указанного объема хранимых данных будет возбуждено ис- 
ключение ОЏОТА ЕХСЕЕРЕР ЕКА. На естественный вопрос, может ли браузер запросить 
у пользователя больше места для хранения данных, ответ будет отрицательным. 
На момент написания этой главы в браузерах не был реализован какой-либо меха- 
низм, позволяющий веб-программисту с согласия пользователя расширять область 
хранения. Некоторые браузеры (например, Орега) разрешают пользователю опре- 
делять квоты хранилища для каждого сайта независимо. Однако такое возможно 
лишь по воле самого пользователя и не может быть инициировано каким-либо 
элементом веб-приложения. 


НТМІ5-хранилище в действии 


Рассмотрим пример практического использования НТМІ5-хранилища. Для этого 
вновь обратимся к игре «Уголки», которую мы реализовали в разделе «Живой 
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пример» главы 4. В нашей реализации есть одна проблема: если закрыть окно бра- 
узера в процессе, то текущее состояние и результаты будут утрачены. НТМТ.5- 
хранилище позволяет сохранять игровой процесс локально — в самом браузере. 
Можете открыть демонстрационную страницу ћҺ№р://аімеіпёоћіті5.огд/ехатріеѕ/ 
ІосаІѕ{огаде-һаіта.һёті, сделать несколько ходов, закрыть вкладку браузера, а затем 
восстановить ее. Если в вашем браузере поддерживается НТМТ.5-хранилище, то 
демостраница волшебным образом «вспомнит» состояние игры: сколько ходов вы 
сделали, как была расположена на доске каждая из фишек, была ли выбрана одна 
из фишек (если да, то какая именно). 

Как работает этот механизм? Каждый раз при изменении состояния игры вы- 
зывается следующая функция: 


#ипсііоп ѕамебатеЅаїе() { 
1Е (!ѕиррогіѕоса15іогаде()) { геїигп Та1зе; } 
]Тоса15Тогаде["па1та .дате.1п.ргодгезз"] = дбатеТиРгодге$$; 
Тог (маг і = 0; 1 < КМитР1есез; 1++) { 
Тоса15№огаде["ћа1та.ріесе." + і + ".гом"] = оРіесеѕ[1 ]. гом; 
Тоса15№огаде[ "ћа1та .ріесе. .соТитп" ] = 9Ріесеѕ[1].соТитп; 


+1 + 
Тоса15іогаде["һа1та .ѕе1естеаріесе" ] = дЅеТесіеаРіесе1паех; 
Тоса15іогаде["ћа1та . ѕе1естеаріесеһаѕтоуеа" ] = оЅе1естеарРіесеНаѕМоуеа; 
Тоса15іогаде["ћа1та .тоуесоипё"] = оМоуеСоипї; 

гебиги Егие; 


Как можно видеть, объект 1оса1$іогаде «узнает», есть ли начатая и неокончен- 
ная игра (свойство дбате1пРгодгеѕѕ булевого типа). Если такая игра есть, то пере- 
бираются все фишки на игровом поле (9Ріесеѕ, массив Јауа$сгірї) и в хранилище 
попадают строки и столбцы, на пересечении которых находятся фишки. После 
этого сохраняются некоторые дополнительные параметры: выбранная фишка 
(оЅе1есїеарРіесеІпаех, целое число), возможность продолжения серии переносов 
этой выбранной фишки (95е1есёеіріесеНаѕМохей булевого типа), общее количество 
сделанных ходов (9МоуеСоипї, целое число). 

При загрузке страницы мы не вызываем автоматически функцию пембате(), 
которая бы присвоила всем этим переменным значения по умолчанию, а вызываем 
гезитебате( ). Опираясь на возможности НТМТ5-хранилища, функция гезитебапе ( ) 
проверяет, нет ли локально сохраненного состояния игры. Если есть, то значения 
будут восстановлены из объекта 1оса15їогаде: 


Типс Той геѕитебате() { 

1Е (!зиррогЕ$[оса1$огаде()) { геїигп Та1зе; } 

9батеТиРгодгез$ = (Лоса15&огаде[ "һа1та .дате.1п.ргодге$$"] == "Егие"); 

1Р (!9батеТиРгодгез$) { гефиги Ға15е; } 

дРіесеѕ = пем Аггау(КМитРТесез); 

Тог (маг і = 0; 1 < КМотРіесеѕ; 1++) { 
уаг гом = рагѕеІпЕ(1оса15ёогаде["һа1та.ріесе." + 1 + ". гом" 1); 
уаг соТити = рагѕеІпЕ(1оса15&огаде[ "һа1та.ріесе." + 1 + ".со1итп" ]); 
дРіесеѕ[1] = пем Се11 (гом, соТити); 


} 
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оМитРіесеѕ = КМитРіесеѕ; 
дЅе1естейРіесеІпаех = рагѕеТпї (1оса15їогаде[ "Па1та . ѕеТ1есїейріесе" 1); 


дЅеТесёейР1есеНаѕМоуеа = Тоса151огаде[ "ћа1та .ѕе1есёейріесеһаѕтоүеа" ] == "гие" ; 
оМоуеСоипі = рагѕеїпЕ(1оса15№огаде[ "ћа1та .тоуесоипЕ" 1); 
гамВоага(); 


гефигп гие; 


Для этой функции очень важна оговорка, которую я сделал выше и повторю 
здесь: данные хранятся в виде строк; если вы хотите работать с данными не стро- 
кового типа, их надо конвертировать при получении. Так, например, флаг «Идет 
игра» (9батеТиРгодгез$) имеет булев тип. В функции ѕауебатеЅїаїе() мы сохраняем 
его, не заботясь о типе данных: 


Тоса15№огаде["һа1та .дате.1п.ргодгеѕ5"] = обатеІпРгодгеѕѕ; 


Но в функции геѕитебапе() надо рассматривать значение, взятое из локального 
хранилища, как строку. Соответствующее логическое значение мы должны по- 
строить сами: 


9батеТиРгодгез$ = (Лоса15&огаде[ "ћа1та .дате.іп.ргодгеѕ5"] == "Егие"); 


Так же и целое количество ходов (9МоуеСоипё) в функции ѕауебатеЅїаѓе() просто 
сохраняется: 


Тоса15огаде[ "ћа1та .тоуесоипЕ" ] = 9МомеСоипі; 


В функции же геѕитебате() мы должны привести значение к целочисленному 
типу, используя стандартную функцию ]ауазст! ре рагѕеїп(): 


ОМоуеСоипЕ = рагѕеІпЕ (1оса15огаде["Па1та .тоуесоипї" 1) ; 


Альтернативы: хранилище без ключей 
и значений 


Хотя прошлое НТМІ5-хранилища изобилует уловками и обходными путями 
(см. раздел «Краткая история прототипов локального хранилища до НТМІ5» 
этой главы), его нынешнее состояние на удивление благополучно. Новый АРТ 
был стандартизован и реализован во всех основных браузерах, на большинстве 
платформ и устройств. У веб-разработчика не каждый день такой праздник, вер- 
но? Но вообще современные опыты не ограничиваются пресловутыми 5 Мбайт 
и именованными парами «ключ — значение». Вот почему есть несколько альтер- 
нативных точек зрения на будущее постоянного локального хранилища. 

Одна альтернатива уже знакома вам по крайней мере своим трехбуквенным 
названием: 501. Разработанный специалистами Соозе в 2007 году кроссбрау- 
зерный плагин Сеагѕ с открытым исходным кодом имел встроенную базу данных 
на основе $ОТіќе. Этот ранний прототип впоследствии повлиял на разработку 
спецификации Мер 501. РасађБаѕе. База данных Жер 501. (ранее известная как 
УеЬрвВв) — тонкая обертка вокруг базы данных 501. С ее помощью можно из 
Јаха$сгірё делать, например, следующее: 
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орепбафаБазе( ' аоситепіѕ', '1.0', '1оса] доситепі $фогаде’, 5%1024*1024, 
#ипсїіоп (90) { 


ар.сһапдеМегѕіоп('', '1.0', #Ғипсёіоп (+) { 
{.ехесифе$ а] ('СКЕАТЕ ТАВІЕ аосійѕ (14, пате) '); 
}, еггог); 


}); 


Как можно видеть, основное действие запрограммировано в строке с методом 
Ехесиёе$01. Здесь могла бы быть любая другая корректная $01. -команда с исполь- 
зованием ЅЕГЕСТ, ЏРРАТЕ, ІМЅЕКТ или РЕГ ЕТЕ. Итак, серверное программирование баз 
данных теперь доступно прямо из ЈауаЅсгірі! 

В табл. 7.3 показано, в каких браузерах реализована спецификация \еБ 801. 
"РаќађБаѕе. 


Таблица 7.3. Поддержка Мер 501 Оаїабаѕе 


ІЕ Еігеѓох Ѕағагі Сһготе Орега іРһопе Апагоіа 
= = 4.0+ 4.0+ 10.5+ 3.0+ =: 


Конечно, если вам доводилось пользоваться несколькими разными СУБД, то вы 
понимаете, что ЗОТ. — это скорее маркетинговый термин, а не жестко регламенти- 
рованный стандарт (иногда то же самое говорят об НТМТЬ, но это неважно). Есть 
действующая спецификация ЗОТ, она называется ЗОТ--92; но ни один сервер баз 
данных не соответствует ей и только ей. Есть ЗОТ. компании Отасе, ЗОТ, Мсгозой, 
ЗОГв МУЗОГ, ОГ в Розёэтез ОТ, ЗОГ. в 5ОГ(Ке. Более того, в каждом из этих про- 
дуктов функциональность $01. со временем расширяется, так что даже обозначения 
вида «5 ОТ. в 5011ќе» оказываются недостаточными. Надо говорить: «версия ЗОТ, 
которая поставляется с ЗОГ.Ке версии Х.У.7». 

Все это подводит нас к следующему замечанию, с которого ныне начинается 
спецификация Мер $01: 


Эта спецификация в своем развитии достигла тупика. Все заинтересованные разработчики 
пользуются одной и той же серверной системой 50| (а именно, 50е), но, чтобы двигаться 
по пути стандартизации, надо иметь несколько независимых реализаций. Пока не найдется 
разработчик, заинтересованный в реализации данной спецификации на основе другой СУБД, 
описание диалекта 501 здесь представляет собой просто ссылку на 54Їќе. Для настоящего 
стандарта такое положение вещей неприемлемо. 


Вот тот фон, на который следует проецировать мой рассказ о другой альтернати- 
ве. Это мощное локальное хранилище для веб-приложений ш4ехе4 ГРаѓађБаѕе АРТ, 
ранее известное как №УеђЅітрІервВ. Теперь его кратко называют ш4ехе4ОВ. 

То4ехе4 Юаќађаѕе АРІ — так называемое хранилище объектов. По своей идейной 
базе хранилища объектов родственны ЗОТ.-СУБД. Есть базы данных с записями, 
в каждой из которых определенное количество полей. Каждому полю присвоен тип 
данных, устанавливаемый при создании базы. Можно выбрать некоторое подмно- 
жество записей и перечислить их с помощью «курсора». Изменения в хранилище 
объектов происходят в рамках «транзакций». 

Если вы знакомы с программированием баз данных на ЗОТ. то все эти термины, 
вероятно, знакомы вам. Основная разница в том, что у хранилища объектов нет 
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собственного структурированного языка запросов. Нельзя построить команду вида 
"ЅЕГЕСТ * Ғгот И5ЕВ$ мйеге АСТІМЕ = '\'". Вместо этого используются методы 
хранилища объектов, позволяющие открыть базу И5ЕВ$, перечислить записи, от- 
сеять записи, соответствующие неактивным пользователям, и востребовать зна- 
чения всех полей в оставшихся записях с помощью методов-акцессоров. Статья 
«[паехеа)В для начинающих» (Һр://һаскѕ.тог2Па.0г9/2010/06/сотрагіпо-іпаехеааь- 
апа-мерааїабаѕе/) — хорошее руководство по функциональности ш4ехе ОВ. В ней 
также скрупулезно сравниваются шАехе ОВ и Мер 501. 

Ко времени написания этой главы система шаехеа)В не была реализована ни 
в одном популярном браузере. В начале июня 2010 года разработчики Мо7Ша со- 
общили, что «в следующие несколько недель будет несколько тестовых сборок 
с шаехеа)В», но до сих пор неизвестно, будет ли этот механизм включен в основ- 
ной релиз Еігеѓох 4. Зато фонд Мо7Ша заявил, что в их браузере не будет реализо- 
вана спецификация \еЬ 501. Сооёе рассматривает возможность поддержки 
ш4ехеа ОВ в Сһготіит и Соов1е Сһготе. Даже МісгоѕоЁ полагает, что пАехе4 ОВ — 
«отличное решение для веб-разработки». 

Итак, чем для вас как для веб-разработчика полезна система ІљіехеірвВ? В дан- 
ный момент абсолютно ничем. А через год? Возможно, как-то уже и пригодится. 
В разделе «Для дальнейшего изучения» есть ссылки на несколько хороших посо- 
бий начального уровня по шаехе ОВ. 


Для дальнейшего изучения 


НТМГ5-хранилище: 
О спецификация НТМТ.5-хранилища (НИр://аеум3.ога/Нт!5/меБ$огаде/); 


О «Введение в ООМ-хранилище» (ПЁр://тз@п.псгозой.соти/еп-из/Пгагу/сс1 97062 
(\5.85).азрх) на сайте МОМ; 


О «Веб-хранилище: простое и мощное хранилище данных на клиентской стороне» 
(Ћ&р://аеу.орега.сот/агісіеѕ/уіем/уер-ѕѓогаде/), статья Шуэтанка Диксита (Ѕһ\уеѓапк 
0510); 

О статья «ООМ-хранилище» (ВЁрз://демеюрегто7Ша.ога/еп/аот/$огаде) на сайте 
Центра Мох Ша для веб-разработчиков; 


я а, ПРИМЕЧАНИЕ 
| м. По большей части эта статья посвящена реализованному в РгеРох прототипу — объекту 
<. 4. діобаІЅїогаде, нестандартному предшественнику объекта оса!5огаде. Поддержка интерфей- 


са ІосаіЅїогаде появилась в Мога Еігеѓох начиная с версии 3.5. 


О «Локальное хранилище НТМТ.5 для мобильных веб-приложений» (Һр://лмм. 
ірт.сот/аемеіорегумогкѕ/хт!/!ібгагу/х-ҺтібтоЫіе2/), руководство на сайте ІВМ для 
разработчиков. 


Предшествующие НТМТ.5 разработки Брэда Ньюберга и соавторов: 


О «В Пецегпеё Ехрогег есть встроенная поддержка постоянного хранения дан- 
ных?!?!» (Һр://соаіпадіпрагааіѕе.ого/меБІод/2005/08/ајах-іпіегпеі-ехріогег-һаѕ-пайме. 
Һет), об объекте иѕегдаѓа в ТЕ; 
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О хранилище Појо (ћр://аосѕ.доодіе.сот/\Міем?аосіа=аһкһкѕк4_89ар9дг#ојо_ 
Ѕїогаде) — часть более обширного руководства по использованию библиотеки 
Юојо О іпе (ныне вышедшей из употребления); 

О справка по прикладному интерфейсу йојох. ѕіогаде .тападег (ћёр://арі.аојоѓоо!кі. 
ога/јѕаос/НЕАру/аојох.ѕіогаде.тападег); 

О ЅУМ-репозиторий аојох. ѕїогаде (Һр://ѕуп.аојоѓооїкі.ого/ѕгс/аојох/їгипк/ѕогаде/). 
МТеЬ $01: 

О спецификация \№еһ $01. Оаѓађаѕе (Һр://аеу.л3.ого/һті5/умерааѓабаѕе/); 

О «Знакомство с базами данных МеЬ ЗОТ» (Һр://һті5аосіог.соту/іпігоаисіпо-уер- 
ѕ91-даќабаѕеѕ5/) — статья Реми Шарпа; 

О демонстрация работы еб РаќаБаѕе (Һр://һті5аетоѕ.сот/аќараѕе); 

О сценарий регѕіѕёепсе. јѕ (К&р://еЁте/2774/регѕіѕіепсе-јѕ-ап-аѕупсһгопоиѕ-јамаѕсгірі- 
огт-ѓог-Һті5деагѕ) — «асинхронная ОКМ на ЈауаЅсгірі», построенная на основе 
Уер 501и Сеагзѕ. 

Тъаехеарв: 

О спецификация п4ехеа ГРаѓађБаѕе АРІ (ћ№р://еу.л3.0г9/2006/меБарі/Іпаехеарв/). 

О «Не только НТМІ5: АРТ баз данных и путь к Іљехеірв» (НЁр://васк$.то7Иа. 
0г9/2010/06/Беуопа-һіті5-даёабаѕе-аріѕ-апа-һе-гоаа-о-іпаехеааь/) — статья Эрана 
Ранганатана (Агип Капхапа ап) и Шона Уилшера (Ѕһамп \/ИзБег); 

О «Еігеѓох 4 и ш4ехеа)В: курс молодого бойца» (ПЕр://паск$.то2Ша.ога/2010/ 
06/сотрагіпо-іпаехеаар-апа-умерааќараѕе/) — статья Эрана Ранганатана и Шона 
Уилшера. 


На волю, 
в офлайн! 


Приступим 


Что такое офлайновое веб-приложение? На первый взгляд перед нами терми- 
нологическое противоречие. Веб-страница загружается, прежде чем отобра- 
жаться, а загрузка требует подключения к Сети. Можно ли скачивать данные, 
находясь вне Сети? Нет, конечно. Но ведь можно скачивать заблаговременно, 
находясь в Сети. На этом принципе и основана система офлайновых приложе- 
ний в НТМІ5. 

В простейшем случае офлайновое веб-приложение представляет собой список 
адресов НТМТ-страниц, С$$-таблиц, файлов ЈауаЅсгірё, изображений и любых 
других ресурсов. На этот список — так называемый манифест, обычный текстовый 
файл, хранящийся где-либо на веб-сервере, — указывает главная страница офлай- 
нового веб-приложения. Браузер, в котором реализована система офлайновых при- 
ложений НТМТ.5, прочтет список О ВТ-адресов из манифеста, скачает указанные 
там ресурсы, поместит их в локальный кэш и будет хранить эти локальные копии 
вплоть до момента их изменения. Когда в следующий раз вы попытаетесь запустить 
веб-приложение, не имея подключения к Сети, браузер автоматически переклю- 
чится на локальную копию. 

С этого момента начинается работа веб-программиста. В ООМ есть свойство, 
которое показывает, в Сети находится пользователь или нет. С изменением значе- 
ния этого свойства (например, сейчас вы работаете в автономном режиме, а через 
несколько секунд подключаетесь к Сети или наоборот) связаны определенные со- 
бытия. И это далеко не вся интересующая нас функциональность. Если приложе- 
ние порождает какую-либо информацию или сохраняет свои состояния, то можно 
хранить все это локально (см. главу 7), пока пользователь находится вне Сети, 
и синхронизировать с удаленным сервером после подключения. Иными словами, 
НТМТ. позволяет перенести приложение в офлайн, но как будет организована его 
автономная работа — решать веб-мастеру. 

В табл. 8.1 показано, в каких браузерах поддерживаются офлайновые веб- 
приложения. 


Таблица 8.1. Поддержка офлайна 


ТЕ Еігеѓох агат Сһготе Орега іРһопе Апагоіа 


- у У у - у У 
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Манифест кэша 


Ключевой для офлайнового веб-приложения файл — манифест кэша. Как я уже 
говорил, это список всех ресурсов, которые ваше веб-приложение может востре- 
бовать, пока оно отключено от Сети. Чтобы запустить процесс загрузки и кэши- 
рования этих ресурсов, надо сослаться на файл манифеста в атрибуте пап1ез{ тега 
<>. 


<!БОСТУРЕ НТМЕ> 
< т] мап1Ре${=” /сасһе.тапі Ғеѕї”> 
<Боду> 


</роду> 
</піт1> 
Файл манифеста кэша может располагаться где угодно на веб-сервере, но 
он должен быть обязательно оснащен МІМЕ-типом Ёехї/сасһе-тапіѓеѕї. Если 
вы работаете с веб-сервером на основе Арасће, то стоит добавить соответству- 
ющую директиву АййТуре в файл с расширением .Пассез$ в корневой директо- 
рии: 


АЧЧТуре Техї/сасһе-тапітеѕї .тапі Ғеѕї 


После этого убедитесь, что имя вашего файла манифеста заканчивается на 
.тапіѓеѕі. Если вы пользуетесь иным веб-сервером или нестандартной конфигура- 
цией АрасВе, обратитесь к справочной документации вашего сервера по вопросу 
об управлении заголовками Сопфет-Туре. 


РАЗМЕТКА В ВОПРОСАХ И ОТВЕТАХ 


Вопрос: Мое веб-приложение состоит из нескольких Ответ: Каждая страница вашего веб-приложения долж- 
страниц. Нужно ли указывать атрибут тапіїеѕї на на ссылаться посредством атрибута тапіїеѕі на файл — 
каждой странице или достаточно поместить его манифест кэша всего веб-приложения. 

только на главной странице? 


Допустим, что формальности выполнены: каждая из ваших НТМТ-страниц 
указывает на файл манифеста кэша, а сам файл обслуживается правильным за- 
головком Сопїепї -Туре. Теперь разберемся, что представляет собой файл мани- 
феста. 

Первая строка файла манифеста обязательно такова: 


САСНЕ МАМТЕЕЗТ 


Последующее содержимое файла манифеста делится на три раздела: явное 
(ехріісіб), резервное (ЁаПасК) и сетевое (МЕТ\УУ ОВК, или опіпе ућіќе]іѕ — «он- 
лайновый белый список»). Заголовок каждого раздела оформляется отдельной 
строкой. Если никаких заголовков в файле манифеста нет, то подразумевается, что 
все перечисленные в нем ресурсы — явные. Чтобы не разболелась голова, поста- 
райтесь пока не обращать внимания на терминологию. 
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Вот образец правильно построенного файла манифеста. В нем перечислены три 
ресурса: С$$-файл, файл ЈауаЅсгірё и изображение в формате ЈРЕС: 


САСНЕ МАМІҒЕЅТ 
/сТосК.с55 
ИсТоск. $ 
/с1оск-Ғасе. јро 


Этот файл манифеста кэша не содержит заголовков. Значит, все перечисленные 
в нем ресурсы по умолчанию явные, то есть браузер скачивает и локально кэши- 
рует их, чтобы использовать вместо соответствующих онлайновых файлов при 
отключении от Сети. Таким образом, после загрузки показанного выше файла ма- 
нифеста из корневой директории веб-сервера будут скачаны с1оск.сѕ5, с1оскК. ј5 
и с1оск-Ғасе. јр9. Если отсоединить сетевой кабель и обновить страницу, то все эти 
ресурсы будут работать по-прежнему. 


РАЗМЕТКА В ВОПРОСАХ И ОТВЕТАХ 


Вопрос: Нужно ли перечислять в манифесте кэша НТМІ-страницу с атрибутом тапіїеѕї, сама эта страница 
НТМІ-страницы? выступает как часть веб-приложения, так что указывать 
ее в файле манифеста не нужно. Однако, если ваше веб- 
Ответ: Единого ответа на этот вопрос не существует. Если приложение состоит из нескольких страниц, надо пере- 
ваше веб-приложение состоит из одной страницы, просто числить ихвсе в файле манифеста. В ином случае браузер 
убедитесь, что она ссылается на манифест кэша посред- не будет знать, что есть и другие НТМІ-страницы (кроме 
ством атрибута папе. Всегда, когда вы переходите на основной), которые следует загрузить и кэшировать. 


Раздел МЕТМОВКК 


Рассмотрим чуть более сложный пример. Например, вы хотите, чтобы приложение- 
часы отслеживало посещения страницы с помощью сценария їгаскіпо. сої, динами- 
чески загружаемого из атрибута <іто $гс>. Если кэшировать этот ресурс, то следить 
за посетителями не удастся. Значит, этот ресурс никогда не должен быть доступен 
в автономном режиме. Вот как добиться поставленной цели: 


САСНЕ МАМІҒЕЅТ 
МЕТМОАК: 
/ұгаскіпд. соі 
САСНЕ: 
/сТоСК.С$$ 
/сЛоск. јѕ 
/с1оск-Ғасе. јр 


Этот файл манифеста содержит заголовки разделов. Со строки МЕТИОКК: начина- 
ется сетевой раздел — онлайновый белый список. Ресурсы в нем никогда не кэши- 
руются и недоступны автономно (попытка загрузить один из таких ресурсов 
в офлайновом режиме приведет к ошибке). Со строки САСНЕ: начинается явный 
раздел, содержимое которого совпадает с предыдущим примером. Каждый из трех 
перечисленных здесь ресурсов будет кэширован и доступен в режиме офлайн. 
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Раздел РАНЧ-ВАСК 


В файле манифеста кэша есть еще резервный раздел. В нем можно перечислить за- 
местители тех интернет-ресурсов, которые по тем или иным причинам не были 
(или вообще не могут быть) сохранены в кэше. В спецификации НТМІ5 приво- 
дится следующий интересный вариант использования «резервного» раздела: 


САСНЕ МАМІҒЕЅТ 
РАШ_ВАСК: 

/ Гое пе. пет] 
МЕТМОКВК : 


Ж 


Как работает эта запись? Рассмотрим сайт с миллионами страниц вроде «Ви- 
кипедии». По-видимому, загрузить такой сайт целиком не представляется воз- 
можным, да и незачем. Но предположим, что вы можете сделать часть страниц 
доступными в офлайне. Как решить, какие из страниц кэшировать? Возможен та- 
кой механизм: каждая просмотренная пользователем страница «Википедии», ги- 
потетически доступной в офлайне, скачивается и кэшируется. Значит, кэш будет 
содержать все статьи, которые когда-либо открывались в браузере, все страницы 
обсуждения (где пользователь может беседовать с другими участниками по поводу 
содержания статей) и страницы правок (где пользователь может вносить измене- 
ния в статьи). 

Этот механизм и призван реализовать манифест кэша. Пусть каждая НТМТ- 
страница нашей «Википедии» (энциклопедическая статья, страница обсуждения, 
правок или истории) ссылается на этот файл манифеста. При посещении любой 
подобной страницы браузер говорит: «Так-так, эта страница — часть офлайнового 
приложения. Что мне уже известно об этом приложении?» Если браузер еще ни 
разу не скачивал соответствующий файл манифеста, то будет создан новый офлай- 
новый кэш приложения, программа скачает все ресурсы, перечисленные в мани- 
фесте кэша, и добавит текущую страницу в кэш приложения. А вот если браузер 
«знает» о данном манифесте кэша, то он просто добавит текущую страницу в кэш 
приложения, который уже существует. Так или иначе, каждая посещенная страни- 
ца попадает в кэш приложения. Это важно: оказывается, можно сделать офлайно- 
вое веб-приложение, которое бы «лениво» добавляло страницы по мере их посе- 
щения. Значит, перечислять все ваши НТМІ -страницы в манифесте кэша не 
обязательно. 

Теперь посмотрим на резервный раздел РАШ ВАСК:, который в данном манифесте 
кэша состоит из одной строки. Часть строки до пробела — это в действительности 
не ОВГ-адрес, а шаблон О ВТ-адреса. Одиночный символ слеша (/) соответствует 
любой странице вашего сайта, а не только главной. При попытке открыть страницу 
в автономном режиме браузер попробует найти ее в кэше приложения. Если стра- 
ница найдется (потому что пользователь посещал ее, пока работал в Сети, и в это 
время страница была автоматически внесена в кэш приложения), то в браузере 
отобразится кэшированная копия. Если же страница не найдется, то вместо сооб- 
щения об ошибке браузер выведет на экран страницу /оѓ#1іпе.ћтї, как и указано 
во второй половине резервной строки. 
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Наконец, рассмотрим сетевой раздел МЕТМОКК:. В показанном выше манифесте 
кэша он также занимает одну строку, которая состоит из единственного символа 
(*). В сетевом разделе этот символ имеет особое значение и называется «подстано- 
вочный символ онлайнового белого списка». С его помощью мы говорим: все, что 
отсутствует в кэше приложения, должно быть скачано с исходного адреса, если до- 
ступно подключение к Интернету. Для «открытых» офлайновых веб-приложений 
это может быть важно. Если вернуться к нашему примеру, то содержательно по- 
лучится следующее: пока пользователь, работая в Сети, просматривает нашу «Ви- 
кипедию» с возможностью автономной работы, его браузер будет скачивать изо- 
бражения, видео и другие встроенные ресурсы обыкновенным образом, даже если 
они принадлежат другому домену. Это вообще свойственно большим сайтам, даже 
тем, которые не составляют часть офлайнового веб-приложения: НТМТ-страницы 
генерируются и обслуживаются локально, а картинки и видеоклипы загружаются 
через сетевую платформу распределения контента (СОМ) на другом домене. 

Без подстановочного символа гипотетическая «Википедия» с поддержкой 
офлайна будет вести себя неожиданно: в частности, при работе в режиме онлайн 
она не будет загружать изображения и видео с внешних серверов. 

Полон ли наш пример? Нет. «Википедия» — это не только НТМІ -файлы. В ней 
на каждой странице используются распределенные файлы С$$, ЈауаЅсгірї и кар- 
тинки. Все эти ресурсы следовало бы перечислять в явном виде в разделе САСНЕ: 
файла манифеста, чтобы при автономной работе страницы правильно отобража- 
лись и отвечали на действия пользователя. Но весь смысл резервного раздела в том, 
чтобы сделать ваше офлайновое приложение «открытым», то есть способным 
выходить за рамки ресурсов, явным образом названных в файле манифеста. 


Поток событий 


Итак, об офлайновых веб-приложениях, манифесте кэша и кэше приложения я рас- 
сказал, но весьма расплывчато, в терминах, далеких от технических подробностей. 
Что-то загружается, браузеры принимают какие-то решения, вот все и работает. 
Но мы ведь говорим о веб-разработке, а в ней ничего не работает так просто, без 
всяких усилий. 

Сейчас поговорим о потоке событий, а именно о ПОМ -событиях. Когда брау- 
зер открывает страницу, которая ссылается на манифест кэша, в объекте м1иаом. 
арр11саф1опСасйе последовательно срабатывает несколько событий. Понимаю, что 
рассказ об этом будет выглядеть сложновато, но, поверьте, изложить все проще 
и без потери важных подробностей не представляется мне возможным. 

Вот какова процедура. 


1. Как только браузер усматривает атрибут папі ғеѕї в теге <>, происходит со- 
бытие сһескіпд объекта міпаом.арр1ісаїіопСасһе (все события, о которых здесь 
и далее идет речь, принадлежат объекту м1пдом. арр1 1саф1опСасйе). Событие 
сһескіпо срабатывает всегда, вне зависимости от того, посещал ли ранее пользо- 
ватель эту страницу или любую другую, которая ссылается на тот же манифест 
кэша. 
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2. 


Если данный манифест кэша обнаружен впервые: 


• происходит событие Помп1оайїпо, после которого браузер начинает загружать 
ресурсы, перечисленные в манифесте кэша; 


• пока идет загрузка, в браузере периодически срабатывает событие ргодгез$ 
с информацией о том, сколько файлов уже скачано к текущему моменту 
и сколько осталось в очереди на загрузку; 


• после того как все ресурсы, названные в манифесте, окажутся благополучно 
загружены, в браузере происходит событие сасһей, которое заключает весь 
процесс; это сигнал, означающий, что офлайновое веб-приложение полно- 
стью кэшировано и готово к работе в автономном режиме. 


Вот все и готово. 


С другой стороны, если пользователь уже посещал данную страницу или любую 
другую, которая ссылается на тот же манифест кэша, то браузер уже «знает» об 
этом манифесте и, возможно, содержит в кэше приложения часть названных 
там ресурсов или даже все приложение в работающем состоянии. Теперь вопрос 
в том, не изменился ли кэш с того момента, когда браузер обрабатывал его в по- 
следний раз. 


• Если ответ отрицательный, то есть манифест кэша остался прежним, то 
в браузере немедленно сработает событие поирда{е — и все. 


• Если ответ положительный, то есть манифест кэша изменился, то в браузере 
произойдет событие домп1оаа1пд и каждый ресурс из числа указанных в ма- 
нифесте будет загружаться повторно. 


Пока идет загрузка, в браузере будет периодически срабатывать событие ргодгеѕѕ 
с информацией отом, сколько файлов уже скачано к текущему моменту и сколь- 
ко осталось в очереди на загрузку. 


После того как все ресурсы, названные в манифесте, окажутся благополучно за- 
гружены, в браузере произойдет событие ирдатегеаду, которое заключает весь про- 
цесс. Это сигнал, означающий, что новая версия офлайнового веб-приложения 
полностью кэширована и готова к работе в автономном режиме. Однако новая 
версия пока не используется. Чтобы пользователю не пришлось перезагружать 
страницу и смена версии со старой на новую произошла автоматически, можно 
вызвать функцию \Лпдом.арр11са1опСасИе . марСасйе(). 


Если во всем этом процессе что-нибудь однажды нарушится, в браузере срабо- 


тает событие еггог и процедура остановится. Весьма урезанный список причин, 
ведущих к неполадкам, таков: 


о 


о 


манифест кэша возвращает НТТР-ошибку 404 (Страница не найдена) или 410 
(Страница удалена); 

манифест кэша обнаружен и не изменился, но НТМТ-страницу, которая со- 
слалась на манифест, оказалось невозможно загрузить; 


манифест кэша обнаружен и изменился, но браузер не сумел загрузить один из 
ресурсов, перечисленных в нем. 
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«Убей меня поскорее!», 
или Отладка как одно из изящных искусств 


Хочу указать здесь на два важных момента. О первом только что шла речь, но вы, 
вероятно, не прониклись этой мыслью в достаточной мере. Поэтому повторяю: 
если хотя бы один ресурс, упомянутый в файле манифеста, не будет скачан над- 
лежащим образом, то весь процесс кэширования вашего офлайнового приложения 
закончится этой ошибкой. Событие еггог в браузере не дает понять, что стало при- 
чиной ошибки. Поэтому отладка офлайнового веб-приложения — очень тягостное 
занятие. 

Второй важный момент связан, если говорить технически, не с ошибкой, но 
склонен принимать вид серьезного сбоя в браузере; все будет выглядеть именно 
так, по крайней мере до тех пор, пока вы не поймете, что происходит. Речь идет 
о том, каким именно образом браузер проверяет, изменился ли файл манифеста 
кэша. В этом процессе три стадии. Сейчас будут скучные, но существенные детали, 
приготовьтесь к ним. 


1. Исходя из обычной НТТР-семантики, браузер проверяет, истек ли срок действия 
манифеста кэша. Метаинформацию об этом файле, как и о любом другом файле, 
пересылаемом по НТТР, веб-сервер обычно включает в НТТР-заголовок ответа. 
Есть такие НТТР-заголовки (Ехрігеѕ и Сасһе-Сопїго1), которые сообщают брау- 
зеру, что файл разрешено кэшировать, не обращаясь к серверу за подтверждени- 
ем. Этот вид кэширования никак не связан с офлайновыми веб-приложениями; 
ему подвергаются почти все НТМТ-страницы, таблицы стилей, сценарии, изо- 
бражения и прочие сетевые ресурсы. 


2. Если срок годности манифеста кэша, согласно его НТТР-заголовкам, истек, то 
браузер запрашивает сервер, появилась ли новая версия файла. Если да, то но- 
вая версия будет загружена. Для этого браузер создаст НТТР-запрос с той датой 
последнего изменения файла манифеста кэша, которая известна клиентской 
программе по НТТР-заголовку, сопровождавшему файл при его последнем ска- 
чивании. Если веб-сервер определит, что после этой даты файл манифеста не 
изменился, будет возвращен код состояния 304 (Не изменено). Все это также 
неспецифично для офлайновых веб-приложений, а происходит фактически со 
всеми сетевыми ресурсами. 


3. Если веб-сервер полагает, что файл манифеста изменился с даты, известной 
клиенту, то будет возвращен код НТТР-состояния 200 (ОК), а вслед за этим сер- 
вер отправит клиенту содержимое нового файла с новыми заголовками Сасйе- 
Сопіго1 и соответственно с новой датой изменения, что обеспечит корректное 
выполнение этапов 1 и 2 вследующий раз. (Вот вчем мощь НТТР! Веб-серверы 
всегда заглядывают в будущее. Обязанный отправить вам файл, веб-сервер бу- 
дет, однако, всеми доступными ему способами избегать немотивированной по- 
вторной пересылки.) Как только новый файл манифеста кэша будет загружен, 
браузер сопоставит его содержимое с уже известным экземпляром. Если со- 
держимое осталось таким же, каким оно было прежде, то браузер не станет по- 
вторно загружать ни один из ресурсов, перечисленных в манифесте. 
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В ходе разработки и тестирования вашего собственного офлайнового веб- 
приложения для вас может оказаться проблематичным каждый из этих трех шагов. 
Например, вы разместили на сервере какой-либо вариант файла манифеста кэша, 
но через десять минут вдруг стало ясно, что следует добавить еще один ресурс. 
Разве это проблема? Добавим одну строку и перезальем файл. Увы. Вот вы обно- 
вили страницу, браузер нашел атрибут тап11е${, произошло событие спеск1ио, 
и... дальнейшее молчание. Ваш браузер будет упрямо настаивать на том, что файл 
манифеста кэша не изменился. Дело, скорее всего, в следующем: ваш веб-сервер по 
умолчанию сконфигурирован так, чтобы предлагать браузерам кэшировать стати- 
ческие файлы в течение нескольких часов (используется НТТР-семантика, а имен- 
но заголовки Сасһе-Сопїго1). Значит, браузер так и не преодолеет первую стадию 
процедуры проверки. Веб-серверу, конечно, известно, что файл подвергся измене- 
ниям, но браузер даже не предполагает, что веб-сервер можно об этом спросить. 
В чем же дело? При последнем скачивании манифеста кэша веб-сервер велел бра- 
узеру (посредством заголовков Сасһе-Сопігої) держать ресурсы в кэше в течение 
нескольких часов. Что, в сущности, и происходит сейчас — спустя десять минут. 

Строго говоря, это не ошибка. Все работает именно так, как должно. Если бы 
веб-серверы не могли принуждать браузеры (и промежуточные прокси-серверы) 
кэшировать данные, Сеть обрушилась бы в считаные часы. Но это слабое утеше- 
ние для того, кто потратил множество времени на тщетные попытки выяснить, 
почему же браузер не видит обновленный манифест кэша. (И даже больше: если 
вы возились достаточно долго, все таинственным образом заработает снова! Ведь 
срок хранения данных в кэше истечет, как и следует ожидать!) 

Чтобы избавиться от головной боли, вам совершенно точно надо будет сделать 
следующее: сконфигурировать веб-сервер так, чтобы файл манифеста перестал 
быть кэшируемым с помощью семантики НТТР. Если вы работаете с веб-сервером 
на основе Арасће, то достаточно будет следующих двух строк в файле .Ибассезз: 


ЕхрігеѕАсііуе Оп 
Ехрігеѕретаиі "ассез$$" 


Это способ запретить кэширование всех файлов в данной директории и всех ее 
поддиректориях. Вероятно, на деле вам придется как-то дополнить это решение. 
Надо либо прибавить директиву <Е11е$>, чтобы отключить кэширование только 
файла манифеста, либо создать поддиректорию, которая содержала бы только файл 
„Ибассез$ и файл манифеста. Технические детали конфигурирования, как и всегда, 
для разных веб-серверов различны, поэтому не помешает обратиться к справочной 
документации о том, как управлять НТТР-заголовками кэширования. 

Отключить НТТР-кэширование файла манифеста не значит решить разом все 
проблемы. Будут еще и ситуации, когда один из ресурсов, хранимых в кэше при- 
ложения, изменился, но его ОКІ-адрес на веб-сервере остался прежним. Здесь 
неполадка возникает на второй стадии процесса. Если не изменился сам файл ма- 
нифеста, то браузер так и не заметит, что был изменен один из ресурсов, кэширо- 
ванных ранее. 

Рассмотрим следующий пример: 


САСНЕ МАМІҒЕЅТ 
# геу 42 
сТосК. јѕ 
СТОСК. С$$ 
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Изменив и перезалив таблицу стилей с1оск.сѕѕ, вы не увидите разницы: файл 
манифеста не поменяется. Поэтому каждый раз, внося изменения в один из ре- 
сурсов вашего офлайнового веб-приложения, обязательно меняйте и сам файл 
манифеста. Достаточно такой несложной вещи, как замена одного символа. На- 
сколько мне известно, проще всего включать в файл манифеста комментарий 
с порядковым номером версии. Когда меняется один из ресурсов, меняйте вер- 
сионный номер в комментарии. Веб-сервер передаст браузеру новый, изменен- 
ный файл манифеста, а браузер, видя, что содержимое файла изменилось, по- 
вторно скачает все ресурсы, перечисленные в манифесте: 


САСНЕ МАМТЕЕЗТ 
# геу 43 
сТосК. $ 
СТосСК.Сѕ5 


Строим офлайновое приложение 


Помните игру «Уголки», которая впервые появилась в этой книге в разделе «Живой 
пример» главы 4 и была улучшена, когда мы стали сохранять состояния игры в ло- 
кальном хранилище (см. раздел «НТМТ.5-хранилище в действии» главы 7)? Выпу- 
стим «Уголки» на волю — в офлайн. Для этого надо составить список всех ресурсов, 
от которых зависит игра. Есть главная НТМТ-страница, есть один файл ЈауаЅсгірі 
со всем кодом игры — и все! Картинок нет, потому что прорисовка выполняется про- 
граммно с помощью АРІ холста, а все необходимые С$$-стили содержатся в теге 
<ѕіуТе> в верхней части страницы. Таким образом, манифест кэша выглядит так: 


САСНЕ МАМІҒЕЅТ 
Па] та. піт] 
../па]та-1оса1$фогаде. јѕ 


Пару слов о путях к файлам. В директории ехатріеѕ/ я создал поддиректорию 
оте/, куда и поместил файл манифеста кэша. Поскольку НТМТ-страницы нужда- 
ются в одном маленьком дополнении, чтобы работать офлайн (об этом ниже), была 
создана отдельная копия НТМТ-файла, которую я тоже поместил в папку о те/. 
Но ввиду того, что код на ]ауазст!ре остался прежним с того времени, как в игру 
вступило локальное хранилище (см. раздел «НТМІ5-хранилище в действии» гла- 
вы 7), я повторно использую тот самый файл с расширением ]5, хранящийся в ро- 
дительской папке ехатріеѕ/. В совокупности размещение всех файлов таково: 


/ехатрТез/]оса1$$огаде-Па1та. Пий 
/ехатр1ез/па1та-1оса1$фогаде. јѕ 
/ехатрТеѕ/о#Ғ1їпе/һа1та .тапіғеѕї 
/ехатрТеѕ/о#Ғ1іпе/һа1та . Піт] 


В файле манифеста (/ехатр1еѕ/о?#1 іпе/һа1та.тапіғеѕї) мы хотим сослаться на два 
файла: во-первых, на офлайновую версию НТМІ-файла (/ехатр1еѕ/о?#1іпе/һа1та. 
тт), путь к которой описан в файле манифеста без префикса, и, во-вторых, на файл 
ауазст!ре из родительской папки (/ехатр1еѕ/һа1та-1оса1ѕ&огаде. јѕ). Путь к нему 
в файле манифеста относительный: ../па1та-Тоса1 {огаде. јѕ. Аналогичным образом 
можно использовать относительные пути в атрибуте $гс тега <іто>. Как будет ясно 
из следующего примера, допускается также использование абсолютных путей 
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(то есть таких, которые начинаются с корня текущего домена) и даже абсолютных 
ОВГ-адресов (которые указывают на ресурсы, размещенные на других доменах). 

Теперь мы должны добавить в НТМТ-файл атрибут тапіѓеѕё, ссылающийся на 
файл манифеста кэша: 


<1рОСТҮРЕ һіт1> 
< т] Тапд="еп" тапіғеѕі=”һа1та.тапіҒеѕЕ”> 


Вот и все! Когда браузер с поддержкой офлайновых приложений впервые за- 
грузит нашу НТМІ -страницу, он скачает связанный с ней файл манифеста и нач- 
нет сохранять все перечисленные в нем ресурсы в кэше приложения, загружая их. 
С этого времени при повторных посещениях страницы в Сети офлайновый алго- 
ритм будет перезагружаться. Поскольку в «Уголки» стало возможно играть авто- 
номно, а позиции незаконченных игр локально сохраняются, то пользователь мо- 
жет сколь угодно часто прерывать партию и возвращаться к ней. 


Для дальнейшего изучения 


Стандарты: «Офлайновые веб-приложения в спецификации НТМТ.5» (Һр://6ї.1у/ 
сСк\2а). 
Документация от разработчиков браузеров: 


О «Офлайновые ресурсы в БЕігеЃох» (Һрѕ://аеуеіореглто2Па.огд/Еп/ОЁйіпе_геѕоигсеѕ_ 
іп_Еігеѓох) на сайте Центра Мо7Ша для веб-разработчиков; 

О «Кэш офлайновых приложений НТМТ.5» (Һр://аеуеіорег.арріе.соту/ѕаѓагі/ 
іргагу/аоситепќайоп/іРһопе/Сопсерїџа[/ЅаѓагіЈ5раѓабаѕеСиіае/ОіпеАрріісаїопСасһе/ 
О#іпеАрріісайопСасћһе.ћїті) — часть «Руководства по программированию для 
локального хранилища и офлайновых приложений в среде Ѕаѓагі» (ћір:// 
аеуеіорегарріе.соту/ѕаѓагі/ібгагу/аоситепѓайоп/іРћопе/Сопсерёиаі/ЅаѓғагіЈ5раќабаѕебиіае/ 
Іпігоаисйоп/Іпігоаисіоп.Һті). 

Учебные и демонстрационные материалы: 


О «Об использовании НТМТ.5 в платформе Стаі для мобильных устройств. 
Автономная работа с помощью кэша приложения. Часть 1» (Ир://доодесоде. 
Біодѕрої.соту/2009/04/отаіі-ѓог-тобііе-һёті5-ѕегіеѕ-иѕіпо.Һт!Г) — статья Эндрю Гри- 
ва (Апаге\м Стіеуе); 


О «Об использовании НТМІ5 в платформе Стаі для мобильных устройств. Авто- 
номная работа с помощью кэша приложения. Часть 2» (Ћр://доодіесое.Біодѕрої. 
сот/2009/05/отаіі-ог-тоЫіе-Һті5-ѕегіеѕ-рагі-2.һті) — статья Эндрю Грива; 


О «Об использовании НТМІ5 в платформе Стаі для мобильных устройств. Авто- 
номная работа с помощью кэша приложения. Часть З» (ћр://доодіесоде.Біодѕрої. 
сот/2009/05/отаіі-ог-тоБіе-Һті5-ѕегіеѕ-рагі-3.һті) — статья Эндрю Грива; 


О «Отладка кэша офлайновых приложений НТМТ.5» (ћ&р://јопаһапѕќагк.соту/ 
Ыо9/2009/09/27/Ч4еБидатд-Нт|-5-оТте-аррИсаНоп-сасНе/) — статья Джонатана 
Старка (]опабБап ЗбатК); 

О «Офлайновое НТМТ.5-приложение для редактирования и публикации изобра- 
жений» (Һ&р://һаскѕ.то2а.0г9/2010/02/ап-Һёті5-о#йіпе-ітаде-ейіќог-апа-иріоааег- 
арріісайоп/) — статья Пола Руже (Раш Коизет). 


Веб-формы 
как форма безумия 


Приступим 


Вы знаете о веб-формах все, не так ли? Действительно, чего там сложного: создать 
контейнер <Ғогт>, добавить несколько полей <іприї фуре="фех{">, возможно, одно 
<іприё фуре="ра$$мога"> и увенчать конструкцию великолепной кнопкой <іприї 
Туре="ѕиртії">. 

Увы, это лишь незначительная часть всех современных функций. В НТМТ5 
появилось больше десятка новых типов полей ввода, которые теперь можно ис- 
пользовать в формах. Когда я говорю «использовать», я имею в виду «использовать 
прямо сейчас» — без каких-либо уловок или обходных путей. Не стоит обольщать- 
ся: я не хочу сказать, что все эти новые чудесные функции уже поддерживаются во 
всех браузерах. Отнюдь. В современных браузерах формы с новыми элементами 
по-настоящему в фаворитах, а вот в старых браузерах такие формы выглядят более 
прохладно. Но в каждом старом браузере, даже в ГЕб, благополучно поддержива- 
ется какой-то рудимент новой функциональности. 


Подсказывающий текст 


Первое, чем обогащены НТМТ.5-формы по сравнению с прежним поколением веб- 
форм, — это подсказывающий текст в полях ввода. Подсказывающий текст ото- 
бражается внутри поля до тех пор, пока оно пусто и не несет фокуса. Как только 
пользователь щелкнет на нем или перейдет к нему с помощью табулятора, под- 
сказывающий текст исчезнет. 

Вам, наверное, уже приходилось видеть подсказывающий текст. Так, в адресной 
строке Мох Ша БЕігеѓох есть подсказывающий текст вида Поиск в закладках и журна- 
ле (рис. 9.1). 


Поиск в закладках и журнале > Ер - 


Рис. 9.1. Подсказывающий текст в строке поиска браузера Еігеѓох 


Если щелкнуть на адресной строке или перейти к ней с помощью табулятора, 
подсказывающий текст исчезнет (рис. 9.2). 
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Рис. 9.2. Подсказывающий текст исчезает при наведении фокуса 


Забавно, что Егеюх 3.5 не поддерживает подсказывающий текст в веб-формах 
на страницах. Что ж, такова жизнь. В каких версиях браузеров работают подсказки, 
можно узнать из табл. 9.1. 


Таблица 9.1. Поддержка подсказывающего текста 


ТЕ Еігеѓох бага Сһготе Орега іРһопе Апагоіа 
= 3.7+ 4.0+ 4.0+ - - – 


С помощью следующего кода вы можете добавить подсказывающий текст 
в свои веб-формы: 


<Ғогт> 
<іприЕ пате="а" р1асеһо1аег="Поиск в закладках и журнале"> 
<іприё ёуре="ѕиртії" уа]ие="Поиск"> 

</ Тогт> 


Браузеры без поддержки атрибута р1асеһо1ег его вполне безвредно игнори- 
руют. 


РАЗМЕТКА В ВОПРОСАХ И ОТВЕТАХ 


Вопрос: Можно ли пользоваться НТМІ-разметкой браузерах стиль текста подсказок позволяет устано- 

в атрибуте рІасеһо!аег? А вдруг я захочу вставить вить особые расширения (55 (ћтїр://ігас.муеБКії.огд/ 

картинку или, скажем, поменять цветовую схему? ехрогїі/37527/Агипк/ауоиќТеѕїѕ/аѕ/огтѕ/рІасеһоІдег- 
рѕеиӣо-ѕїуІе.һті). 

Ответ: Атрибут ріасећоІег — сугубо текстовый и не 

может содержать НТМ!-кода. Однако в некоторых 


Поля с автофокусировкой 


На многих сайтах с помощью ЈауаЅсгірё реализована автоматическая фокусировка 
первого из полей веб-формы. Так, на главной странице Соодіе.сот форма поиска 
несет фокус, так что запрос можно вводить сразу, не помещая курсор в поле. Это 
удобно для большинства посетителей, но может мешать «продвинутым» пользо- 
вателям и людям с особыми потребностями. Если на такой странице нажать Пробел, 
то прокрутка на один экран вниз не сработает, как можно ожидать; вместо этого 
в поле ввода появится пробел. Еще пример: если переместить фокус в другое из 
полей формы, пока страница грузится, то «услужливая» система вернет курсор 
обратно, в начальное поле. Это сбивает с ритма, к тому же пользовательский ввод 
попадает не туда, куда следует. 

Все эти специальные случаи трудно учесть при автофокусировке с помощью 
Јаха$сгірё. Еще недавно пользователей, которых раздражает «кража» фокуса веб- 
страницами, ничем нельзя было утешить. 
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Для решения проблемы в НТМТ.5 введен атрибут аиёо?осиѕ, который может 
быть применен к любому элементу веб-формы. Этот атрибут работает в полном 
соответствии с названием, то есть перемещает курсор в одно из полей ввода на 
форме. Но это не сценарное решение, а НТМІ -код, значит, его поведение на всех 
сайтах будет одинаково. Со своей стороны, разработчики браузеров и браузерных 
расширений, возможно, предложат пользователям функцию отключения автофо- 
кусировки. 

В табл. 9.2 показано, какие из браузеров поддерживают автофокусировку. 


Таблица 9.2. Поддержка автофокуса 


ТЕ Еігеѓох баѓагії Сһготе Орега іРһопе Апагоіа 
– - 4.0+ 3.0+ 10.0+ У У 


Вот как можно назначить автофокусировку одного из полей формы: 


<Гоги> 

<1приё пате="д" аифофоси$> 

<1приё фуре="зибтя®" уаТие="Поиск"> 
</Тоги> 


Браузеры, которые не поддерживают атрибут аџёоѓосиѕ, просто игнорируют его. 

А если мы захотим, чтобы автофокусировка работала везде, а не только в НТМІ5- 
браузерах? Тогда придется остаться при нынешнем сценарии автофокусировки, сде- 
лав в нем два небольших изменения. 


1. Добавить атрибут аиіоғосиѕ в НТМТ-код. 


2. Протестировать поддержку атрибута аиіо?осиѕ в браузере (см. раздел «Автофо- 
кусировка в формах» главы 2). Запускать сценарий следует только в том случае, 
если встроенной поддержки атрибута аифоТосиз в браузере нет. 


<Ғогт пате=" "> 


пат 


<іприё 19="9" аиЕоҒосиѕ> 
<Ѕсгірі> 
ЇР (!(“аџёоҒосиѕ” іп доситепЁ. сгеаёеЕТетеп(“іприї”))) { 
аӢоситепё .деЕЕТетепВута( "а" ) . Ғосиѕ(); 


} 
</5сгірі> 
<іприё Еуре="ѕиртії" уа1ие="Поехали"> 
</ Ғогт> 


Страница Һір://аімеіпіоћёті5.огд/ехатріеѕ/іприё-аиїоѓосиѕ-міһћ-ғаПбаск.Һті являет 
собой пример автофокусировки с запасным (сценарным) вариантом. 


СЕКРЕТЫ РАЗМЕТКИ 


Многие веб-страницы для установки фокуса дожи- пока не будут загружены все картинки. Таким обра- 
даются события муіпдому.опіоаа. Но оно не сработает, зом, если на странице много картинок, «наивный» 
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сценарий потенциально способен перенести фокус 
в одно из полей уже после того, как пользователь 
начал работать с другим элементом страницы (вот 
почему «продвинутые» пользователи так не любят 
сценарии автофокусировки). В предыдущем примере 
сценарий расположен в коде страницы непосред- 
ственно после поля формы, на которое он ссылается. 
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Может случиться так, что ваша серверная система 
проявит недостаточно гибкости для реализации по- 
добного решения. Тогда, если сценарий нельзя вста- 
вить посередине страницы, следует устанавливать 
фокус по срабатыванию такого пользовательского 
события, как $(@оситепї) .геаду() в јдиегу, а не стан- 
дартного ууіпдом.опіоай. 


Адреса электронной почты 


Больше десятка лет веб-формы могли включать поля лишь нескольких типов, са- 
мые популярные из которых перечислены в табл. 9.3. 


Таблица 9.3. Типы полей ввода в НТМІ 4 


Тип поля НТМЕ-код Примечание 
Флажок <іприї ќуре="сһескбох"> Может быть установлен и снят 
Переключатель <іприї ќуре="гааіо"> Способен объединяться в груп- 


пы с другими полями ввода 
Вместо любых символов, вво- 
димых пользователем, 
отображает точки 


Поле ввода пароля <іприё уре="раѕѕуога"> 


Раскрывающийся список 
Выборщик файла 
Кнопка отсылки формы 
Поле текстового ввода 


<ѕеіесі> <оріоп>... 
<іприї {уре="Яе"> 
<іприё уре="ѕиртії"'> 
<іприё уре="ехі"> 


Выводит окно открытия файла 


Атрибут їуре может быть 
опущен 


Все эти типы полей работают ив НТМТ.. При обновлении до НТМТ.5 (то есть, 
как правило, при смене определения типа документа, о чем читайте в разделе 
«Определение типа документа» главы 3) вам не придется вносить в веб-формы 
никаких изменений. Да здравствует обратная совместимость! 

Впрочем, в НТМТ.5 появились некоторые новые типы полей, за использование 
которых (по причинам, которые сейчас станут ясны) единогласно выступают про- 
фессионалы. 

Первый из этих новых типов полей предназначен для ввода адресов электрон- 
ной почты. Вот код простейшей формы с таким полем: 


<Тогт> 

<іпри фуре="ета11 "> 

<іприЕ Еуре="ѕирті" уаТие="бо"> 
</ Ғогт> 


Только что я с большим трудом удержался от того, чтобы написать: «В брау- 
зерах, которые не поддерживают фуре="ета11"...› Что же меня останавливает? Ви- 
дите ли, я не уверен в смысле выражения «не поддерживать їуре="етаі1"». В опре- 
деленном смысле «поддерживают» фуре="ета11" все браузеры. Браузер может не 


Адреса электронной почты 159 


делать с таким полем ничего особенного (далее будет несколько примеров спе- 
цифической обработки), но браузеры, незнакомые с їуре="етаі1", во всяком слу- 
чае распознают такое поле как фуре="{ех(" и отобразят его как обычное поле тек- 
стового ввода. 

Мне буквально не хватает слов для доказательства важности этого факта. Мил- 
лионы форм в Интернете, в которых предлагается ввести адрес электронной почты, 
построены на основе <іпри фуре="{ехё">. Пользователь видит перед собой поле 
текстового ввода, вписывает в это поле свой электронный адрес — и все. Но вот 
появляется НТМТ.5, в котором определен фуре="ета11". Какой будет реакция брау- 
зеров? Неужели они сойдут с ума? Вот и нет. Все браузеры мира, даже ТЕб, вос- 
принимают неизвестное значение атрибута фуре как їуре="їехї". Так что обновить 
веб-формы, вписывая в них фуре="ета1 1", можно уже сейчас. 

Что же имеется в виду, когда говорят, что браузер поддерживает фуре="ета11"? 
Собственно, что угодно. В спецификации НТМТ.5 не предписан какой-либо опре- 
деленный вид пользовательского интерфейса для новых типов полей. Орега по- 
мещает рядом с полем {уре="ета11" значок электронной почты. Другие НТМТ.5- 
браузеры, например Ѕаѓагі и Сһготе, отображают обычное поле текстового ввода, 
такое же, как їуре="ехї". Поэтому пользователь, если только он не заглянет в ис- 
ходный код страницы, так и не увидит разницы. 

Есть еще 1РВопе. Физическая клавиатура у 1РБопе отсутствует, а текст набира- 
ется посредством прикосновений к экранной клавиатуре, которая всплывает в под- 
ходящее для этого время, например при фокусировке одного из полей формы на 
веб-странице. Браузер 1РЬопе устроен очень интересно: распознавая некоторые 
НТМІ5-типы полей ввода, он динамически 
меняет вид экранной клавиатуры, чтобы соот- 
ветствующие символы было удобнее вводить. |  аврыуренетей» ом 

Так, например, адрес электронной почты — | меймовит6 ого/еха... ©] 
это текст, не правда ли? Да, но текст особого 
рода. Практически во всех адресах электрон- 
ной почты содержатся символ @ и по крайней 
мере одна точка (.), а пробела ожидать не слее <Рогт> 
дует. Поэтому, когда пользователь іРћопе фо- 
кусирует на странице тег <іприї їуре="етаі1">, 
всплывающая экранная клавиатура содержит 
пробел меньше обычных размеров, а также спе- 


циальные клавиши для символов . и ©, как по- а № Е в 0 0 о Р 
казано на рис. 9.3. 

Если подвести итог, то окажется, что нет А В | Е е н |4 к 
никаких препятствий, которые бы заставля- 
ли повременить с превращением полей ввода === 
электронных адресов в фуре="ета11". Этого ж 2. Х| я В м мі «3 
превращения, правда, почти никто не заме- нн па 
тит, кроме пользователей іРћопе. Но кто заме- —123 засе) е | и ев 
тит, тот, тихонько улыбнувшись, поблагодарит 
вас за возможность работать в Сети чуть-чуть 


-в001 АТ&Т = 


<1праЕ +уре="етаі1"> 


АЩОРИ 


Рис. 9.3. Клавиатура, 
оптимизированная для ввода адреса 
проще. электронной почты 
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Веб-адреса 


Веб-адреса, известные многим как О ВТ, а малочисленным педантам как ОВТ, — это 
еще один тип специализированного текста. Соответствующие сетевые стандарты 
определяют синтаксис веб-адресов. Если веб-приложение просит вас ввести в фор- 
му веб-адрес, то ожидается, что вы напишете что-то наподобие Ир: //мммм.дооде. 
сот/, а не «Петровка, 38». В адресах часто применяются правые слеши и точки, 
а пробелы запрещены. Каждому веб-адресу 

свойствен суффикс домена: .сот, .огд и др. Ал 11:31,2М 

Леди и джентльмены, представляю вашему 
вниманию (барабанная дробь, все глаза при- 
кованы к сцене)... <іприё фуре="иг1 ">! НаіРћопе 
этот тип поля текстового ввода выглядит, как 
показано на рис. 9.4. 

Как и в случае с адресом электронной почты, 
іРћопе предоставляет пользователю виртуаль- 
ную клавиатуру особого вида, приспособлен- 
ную для веб-адресов. Пробел здесь полностью 


заменен тремя виртуальными клавишами: па Рн“, 

вый слеш (/), точка (.) и .сот. Удерживая на- а м В О 0 0 о Р 

жатой клавишу .сот, можно выбрать другой по- 

пулярный домен: .огд, .пеЁи т. п. А В | Е е н |. к 
Браузеры без поддержки НТМТ.5 будут об- Е 

рабатывать фуре="иг1" в точности так же, как _ м Х| [с в м м «3 

їуре="Техї", что снимает все вопросы по поводу 


использования полей этого типа для ввода веб- @123 тие | сот Со 


<Ғогт> 


<1приЕ Еуре="аг1"> 


АЩОРИ Бопе 


адресов. 
Рис. 9.4. Клавиатура, 
оптимизированная для ввода 
Числа как счетчики ЧА! адреса 


Далее у нас на очереди числа. Спрашивать о числе во многих отношениях сложнее, 
чем об адресе электронной почты или веб-адресе. Прежде всего числа не так просты 
сами по себе. Вот выберите какое-нибудь число. —1? Нет, я имел в виду число из 
интервала от 1 до 10. 7 1/2? Нет, нет, только не дробь, пожалуйста. А как насчет л? 
Ну, это совсем уж иррациональный выбор. 

Я хочу показать, что о «числах вообще» спрашивают не так часто. Чаще запра- 
шивается число определенного вида (например, целое, но не обыкновенная или 
десятичная дробь; либо что-либо более сложное, скажем, кратное 10) из опреде- 
ленного диапазона. Возможность сделать все это и предоставляет НТМІ5. 

Рассмотрим такой пример: 


<іприЕ Туре=” питрег” 
тіп="0" 
тах="10" 
ѕіер="2" 
уа1ие="6"> 
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Будем рассматривать атрибуты по порядку (если хотите, можете в браузере 
экспериментировать с их значениями). 


О Туре="питег" — означает, что поле ввода — числовое. 
О тіп="0" — говорит, чему равно минимально допустимое значение поля. 
О пах="10" — говорит, чему равно максимально допустимое значение поля. 


О $фер="2" — в сочетании со значением тіп определяет множество разрешенных 
чисел внутри диапазона: 0, 2, 4 ит. д. вплоть до значения пах. 


О уа1ие="6" — значение по умолчанию. Этот атрибут должен быть вам знаком: он 
традиционно применяется, чтобы выставить значения по умолчанию в полях 
формы. (Хочу напомнить, что НТМТ.5 основан на предыдущих версиях НТМІ. 
Чтобы делать уже знакомые операции, вам незачем переучиваться со старого 
стандарта на новый.) 


Таков НТМІ-код поля ввода числа. Надо помнить, что все перечисленные атри- 
буты необязательны. Если вы почему-либо решили ограничить интервал только 
минимальным значением, а не максимальным, задайте атрибут тіп и не указывай- 
те тах. По умолчанию шаг счета равен единице, что позволяет опустить атрибут 
ѕтер во всех тех случаях, когда другое значение шага не требуется. Если значение 
по умолчанию не задано, то атрибут уа1ие может принять вид пустой строки или 
вообще исчезнуть. 

На этом НТМТ5 не останавливается. По той же самой милой сердцу цене: ноль 
целых ноль десятых — программист приобретает следующие замечательные мето- 
ды ]ауазсгре: 


О 1іприЁ.ѕїерур(п) — увеличивает значение поля 
на пединиц; 


= АТ&Т <> 11:40 РМ 


О тру. $ербомп(п) — уменьшает значение поля т 2. 
на пединиц; іуеіпіоћіті5.ога/еха... © [ сое ) 

О іприс.уа1иеАѕ№итре” — возвращает текущее | 
значение поля в виде числа с плавающей за- 
пятой (свойство іприї.уа1ие, напомню, всег- |«ғогт> 


да строкового типа). ЕО Будаа 


Возникли проблемы с отображением в бра- 
узере? Надо сказать, что интерфейс числовых 
встраиваемых компонентов в различных брау- 
зерах реализован по-разному. На 1РБопе, где 
проблематичен главным образом пользователь- 
ский ввод, браузер вновь оптимизирует вир- 
туальную клавиатуру, на этот раз для ввода 
чисел, как показано на рис. 9.5. 

В десктопной версии Орега то же самое поле 
фуре="питьег" отображается в виде счетчика с не- 
большими стрелками, направленными вверх 
и вниз. Щелкая на них, можно увеличивать 
и уменьшать числовое значение (рис. 9.6). 


ыы 
02000500000 
1: 1 ее" 
- НИШЕ = 
= ЕИ < 


Рис. 9.5. Клавиатура, 
оптимизированная для ввода числа 
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Орега бережно относится к атрибутам тіп, тах и $ер, Г“ 


поэтому вы легко добьетесь приемлемого числового 

значения. При достижении максимума стрелка «вверх» |<Еохкш> 

в счетчике «выцветает» и становится серой (рис. 9.7). <іпроё буре="полрег" 
Правило, которому подчинены все другие поля вво- 


да, упоминавшиеся в этой главе, распространяется и на хабе 
фуре="питьег": браузер, который не поддерживает этот С" 
тип, будет расценивать его как фуре="{ехе". В поле будет зфер="2" 
отображено значение по умолчанию (так как оно хра- уа1е="6"> 


нится в атрибуте уа1ие), а прочие атрибуты — тіп, тах 
и др. — будут проигнорированы. Вы можете реализо- 


Рис. 9.6. Счетчик 


вать их самостоятельно, а можете воспользоваться од- —— 
остоятельно, Оте ОС к З СЯ ОД 0] ө) 

ним из многочисленных Јауа$сгірі-фреймворков, в ко- нь 

торых компоненты типа «счетчик» уже реализованы. Рис. 9.7. На счетчике 


достигнуто максимальное 


Но не забудьте сначала протестировать встроенную 
значение 


поддержку НТМГТЬ (см. раздел «Типы полей ввода» 
главы 2), например, таким образом: 


1 (!Модегилиг. 1прифуре$ .питрег) { 
// встроенной поддержки полей фуре="питрег" нет, 
// можно попробовать решить проблему с помощью Војо 
// или другого ЈамаЅсгірї-фреймворка 


} 


Числа как ползунки 


Счетчики, о которых речь шла в предыдущем разделе, — не единственный способ 
представления вводимых чисел. Вам, наверное, знакомы также компоненты типа 
«ползунок», внешний вид одного из которых показан на рис. 9.8. 

Теперь ползунки доступны и в веб-формах. По своему 


НТМГ-коду ползунок фантастически похож на счетчик: — [<] 


<іприї фуре=”гапде” 
пии="0" 
тах="10" 
ѕіер="2" 
үа1ие="6"> 


Рис. 9.8. Ползунок 


Доступны те же самые атрибуты, что и у поля ввода фуре="питрег": тіп, тах, бер, 
уа1ие. Они и означают то же самое. Отличается только внешний вид пользователь- 
ского интерфейса. Как ожидается, вместо обычного поля для ввода браузеры будут 
отображать їуре="гапде" в виде ползунка. Ко времени написания данной главы это 
уже умели делать последние версии Ѕаѓагі, Сһготе и Орега. К сожалению, іІРһћопе 
выводит на экран просто текстовое поле и даже не оптимизирует экранную кла- 
виатуру для ввода чисел. Все остальные браузеры рассматривают поля такого типа 
как їуре="+ехі". В общем, не усматривается серьезных причин, которые мешали бы 
уже сейчас начать пользоваться ползунками на веб-страницах. 
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Выборщики даты 


В НТМІА не было компонента для выбора даты. Решение было найдено в различ- 
ных ЈауаЅсгірё-фреймворках (Юојо, јОпегу ОТ, УПТ и библиотека СІоѕше), но, ко- 
нечно, каждое такое решение требует постоянной опоры на фреймворк, с помощью 
которого построен выборщик. 

В НТМІ5 был в конце концов определен встроенный элемент управления — 
выборщик даты, не полагающийся на пользовательские сценарии. Фактически есть 
шесть разных выборщиков: дата, месяц, неделя, время, дата + время и дата + время 
с часовым поясом. 

Из табл. 9.4 видно, что в настоящее время поддержка этой функциональности, 
мягко скажем, неширока. 


Таблица 9.4. Поддержка выборщиков даты 


Тип Орега Остальные браузеры 
{уре="дае" 9.0+ _ 
фуре="топй" 9.0+ - 
фуре="меек" 9.0+ – 
Ұуре="іте" 9.0+ = 
фуре="даейте" 9.0+ _ 
{уре="дайейте-оса!" 9.0+ – 


Как Орега отображает <іприі фуре="дафе">, показано на рис. 9.9. 


[0 март [5 2071] 


Пн Вт Ср Чт Пт Сб Вс 
285123456 
78 91011 12 13 
14 15 16 17 18 19 20 


21 22 23 25 26 27 
28 29 30 3%1 23 
4565678910 


Пн Вт Ср Чт Пт С6 Вс 


2 456 
7 8 9%0 11 12 13 


14 15 16 17 18 19 20 
21 22 23 24 25 26 27 
28 29 3031123 
4565678910 


28 29 30 3 23 
45678910 


Рис. 9.11. Выбор месяца 


Рис. 9.9. Выбор даты Рис. 9.10. Выбор даты 


и времени 


На тот случай, если требуется дата вместе с временем, Орега поддерживает 
<1приё ёуре="даеёіте"> — выборщик, внешний вид которого показан на рис. 9.10. 

Если нужны только месяц и год (может иметься в виду, например, месяц, 
когда истекает срок действия кредитной карты), Орега отобразит объект <1при® 
ёуре="попїћ">, показанный на рис. 9.11. 

Менее распространен, но также доступен выбор определенной недели года. Это 
позволяет сделать объект <іпри фуре="меек"> (рис. 9.12). 
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Можно, наконец, выбирать только время с помо- 
щью объекта <1приё ёуре="ііте"> (рис. 9.13). 

Вероятно, в конце концов и другие браузеры начнут 
поддерживать эти типы полей ввода. Поначалу в брау- 
зерах, не распознающих {фуре="да{е" и его варианты, эти 
поля, как поля фуре="ета11" (см. раздел «Адреса элек- 
тронной почты» этой главы) и других типов, будут ото- 
бражаться в виде полей ввода обычного текста. Если 28 29 3031 1 2 
хотите, <1приё Еуре="дате"> и его «родню» можно уже 45678910 
внедрять: это обрадует пользователей Орега, а другие 
браузеры тем временем успеют наверстать упущенное. 
Как вариант, можно, пользуясь <іприї фуре="дафе">, 
проверять, встроена ли в браузер поддержка выборщи- 
ков даты (см. раздел «Типы полей ввода» главы 2), 
и как запасным решением пользоваться одним из сце- ЕЕ] 
нариев по вашему выбору: 


2011-\/11 ~ 
2) мәт [2011] 
Неде Пн Вт Ср Чт Пт С6 Вс 
2212345 6 
7891011 12 13 


14 15 


Рис. 9.12. Выбор недели 


<Ғогт> Рис. 9.13. Выбор времени 
<іприї фуре="дафе"> 
</Тогт> 


<ѕсгірі> 
уаг 1 = доситепі .сгеаёеЕТетепі("іприё") ; 
1. ѕеАіігірите("уре", "даїе"); 
ЇЁ (1.буре == "ехі") { 
// Встроенной поддержки выборщиков даты нет. 
// Воспользуйтесь Војо/ јОиегуут/Ү0І/СТоѕиге или другим решением, чтобы 
// создать компонент-выборщик и динамически заменить им тег <1при> 


} 


</ѕсгірі> 


Формы поиска 


Вот действительно интересная тема. Суть всего достаточно проста, объяснять нуж- 
но только некоторые детали реализаций. Итак... поиск. 

В наши дни это далеко не только поиск от Соозе или Үаһоо! (хотя и это тоже). 
Вспомните любую форму поиска на любой странице или сайте. Окна поиска име- 
ют Атахоп, М№е\уе5е, большинство блогов ит. д. Как сделаны эти формы? В их осно- 
ве, каки в основе большинства полей текстового ввода в современном Интернете, 
лежит тег <іприё їуре="Техї">. НТМТ.5 исправляет дело: 


<Ғогт> 
<іприё пате="д" ёуре=”ѕеагсһ”> 
<іприї фуре="зиртя$" ма1ие="Еіпа"> 
</Тоги> 


В некоторых браузерах такое поле будет неотличимо от обычного текстового. 
Но при пользовании Ѕаѓагі на Мас ОЗ Х форма поиска будет выглядеть так, как 
показано на рис. 9.14. 
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Улавливаете разницу? У поля ввода скругленные углы! Да, конечно, вам сейчас 
трудно сдержать эмоции, но погодите: это еще не все! Когда вы начнете вводить текст 
в поле фуре="еагсй", Ѕаѓагі справа от поля отобразит кнопочку с крестиком. Ее нажатие 
позволит очистить поле от текста (Соозе Стоте, по своей технологической начинке 
родственный За, ведет себя так же). Обе эти хитрости созданы по образу «родных» 
форм поиска в іТипеѕ и других клиентских приложениях Мас ОЗ Х (рис. 9.15). 


“\ 
ЕСЭ, ќоо ) (Со 
<Ғогт> <Ғогт> 
<іпроє ёуре="ѕеагсһ"> <іпроє буре="ѕеагсһћ"> 
<іпроё ёуре="ѕортіё" у <іпроё ёуре="зортіё" у 
</ Ғогт> </ Ғогт> 
Рис. 9.14. Форма поиска Рис. 9.15. Форма поиска, несущая фокус 


Арріе применяет тег <іприЁ Ёуре="ѕеагсһ"> в форме поиска по своему сайту, что- 
бы на нем чувствовалась атмосфера Масіпѓоѕћ. Но ничего специфического для 
МасіпѓоѕћЬ в этой функциональности нет. В сущности, это просто гипертекстовая 
разметка. Любой браузер на любой платформе может прорисовывать форму поис- 
ка в соответствии с общей стилистикой платформы. 

Браузеры, которые не воспринимают фуре="5еагсй", будут видеть в нем, как 
и в остальных новых типах, не более чем обычный фуре="{ех(". Стоит уже сейчас 
задуматься об использовании полей іуре="ѕеагсһ" во всех окнах поиска. 


Выборщики цвета 


В спецификации НТМІ5 описано также поле ввода <іприї фуре="со1ог">, которое 
позволяет выбрать цвет и возвращает его шестнадцатеричный код. Браузеры пока 
не поддерживают выбор цвета — и это, честно говоря, очень плохо. Мне всегда 
нравились панели выбора цвета в Мас ОЅ. Может быть, когда-нибудь что-то по- 
добное будет реализовано и в браузерах. 


СЕКРЕТЫ РАЗМЕТКИ 


Есть, впрочем, одна причина, осложняющая приме- я называю самые базовые вещи: границы, фоновые 
нение <іприќ їуре="еагсһ">. К полям поиска Ѕаїагі цвета, фоновые изображения, отступы и пр.). Зато есть 
не применяет стандартные (5$-стили (стандартными круглые уголки!.. 


И еще об одной вещи 


В этой главе я рассказывал о новых типах полей ввода и таких новых функциях, 
как автофокусировка поля формы. За кадром осталось самое, пожалуй, захваты- 
вающее, что можно сообщить об НТМТ.5-формах: автоматическая проверка (вали- 
дация) пользовательского ввода. Рассмотрим популярную проблему ввода адреса 
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электронной почты в веб-форму. Чтобы не случалось сбоев, вы, вероятно, прове- 
ряете корректность ввода сначала на клиентской стороне с помощью ЈауаЅсгірї, 
а потом на серверной стороне с помощью РНР, Руоп или другого языка сервер- 
ных сценариев. Проверка электронных адресов с помощью Јауа$сгіре чревата дву- 
мя большими проблемами: 


О неожиданно много посетителей, которые держат ЈауаЅсгірё выключенным (их, 
вероятно, около 10 %); 


О результат проверки будет ошибочным. 


Да, в самом деле ошибочным. Определить, является ли валидным адресом элек- 
тронной почты какая-либо случайная последовательность символов, невероятно 
трудно (Вр://ммммм.гед\аг-ехргезюпз./по/етай. Нет). Чем напряженнее поиск решения, 
тем сложнее становится задача (Һ&р://мм.ех-раггої.сот/рам/Маі-ВЕС822-Ааагеѕѕ.һіті). 
Я ведь уже сказал, что она очень-очень сложна (Һр://һааскеа.сот/агсћіме/2007/08/21/1- 
Кпеу-һом-о-үаііааѓе-ап-етаіі-ааагеѕѕ-ипі-і.аѕрх)? Так не проще ли заставить браузер 
делать всю эту черную работу? 

Скриншот на рис. 9.16 взят из Орега 10, хотя нужная функциональность при- 
сутствовала уже в Орега 9. Задействован простейший код: атрибуту їуре присвое- 
но значение ета11 (см. раздел «Адреса электронной почты» этой главы). Когда 
пользователь пытается отправить форму с объектом <1приё фуре="ета11">, Орега 
даже при выключенных сценариях автоматически проверяет адрес почты на соот- 
ветствие ВЕС. 

В Орега предлагается также валидация веб-адресов, вводимых в поля <1ири 
фуре="иг1 ">, и чисел в полях <1ириё їуре="питрег">. Валидация чисел принимает во 
внимание даже атрибуты піп и пах, так что Орега не позволит пользователю ото- 
слать форму, если введенное в одно из полей число чересчур велико (рис. 9.17). 


Е] оо Баг Со 


{оо Баг 1$ пої а 


11 15 100 НОП. Тһе 
һідһеѕї уаме уои 
сап изе 1$ 10. 


1еда! е-тай 
аййгеѕѕ 


Рис. 9.16. Орега проверяет їуре="етаіі" Рис. 9.17. Орега проверяет їуре="питбег" 


К сожалению, автоматическую валидацию НТМТ.5-форм пока не поддержива- 
ет больше ни один браузер, а значит, вам придется еще какое-то время обходиться 
сценарными альтернативами. 


Для дальнейшего изучения 


Спецификации и стандарты: 

О типы тегов <іприї> (Һр://6іє.Іу/акмен4); 

О атрибут <іпри р1асеһо1аег> (Һр://Ыієу/саСі8№); 
О атрибут <іпри аифотосиз> (Һр://6ієу/аь1рј4). 


Јаха$сгірё-библиотеки: Мойегпіхг (Вр: //ммм.тодегпйг.сот) — библиотека для 
тестирования НТМТ.5-функций. 


Микроданные 


и другие 
красивые слова 


Приступим 


В НТМІ5 свыше 100 тегов (ћр://ѕітоп.Һті5.ого/һті5-ејегтепёѕ). Среди них есть 
как семантические элементы (см. главу 3), так и контейнеры для сценарных АРТ 
(см. главу 4). На протяжении всей истории НТМГ (о которой можно прочесть 
в главе 1) разработчики стандартов спорили, какие теги достойны быть включен- 
ными в язык, а какие — нет. Нужен ли в НТМІ. тег <Е1д9иге>? А тег <регѕоп>? А как 
насчет тега <гапї> (по-русски приблизительно «пафосный бред»)? По таким во- 
просам раз за разом принимаются решения, затем пишутся спецификации, созда- 
ются реализации и Интернет спешит навстречу своему будущему. 

Конечно, современный НТМІ. не всем по душе, как и любой стандарт. Часть 
идей в нем не прижилась. Так, в НТМТ.5 отсутствует тег <регѕоп> и тем более <гапі>. 
Ничто не мешает вам включить <регѕоп> в код вашей веб-страницы, но такая стра- 
ница не будет валидной. Следует ожидать, что она будет неправильно отображать- 
ся в браузерах (см. раздел «Большое отступление о том, как браузеры обрабатыва- 
ют незнакомые элементы» главы 3) и, возможно, будет противоречить очередной 
спецификации НТМГ, если там наконец появится тег <регоп>. 

Что же делать веб-мастеру со склонностью к семантической верстке, если вво- 
дить собственные теги нельзя? Известны попытки расширить предшествующие 
версии НТМІ.. Самый популярный способ такого расширения — микроформаты 
(ћр://тісгоѓогтаїѕ.огд), которые пользуются атрибутами с1аѕѕ и ге1, определенны- 
ми в стандарте НТМІД. Альтернативный вариант — ВОРЕа (Һір://ммм.\3.ого/ТВ/ 
гаѓа-ѕупќах/), разработанный для использования с ХНТМІ (см. раздел «Послесло- 
вие» главы 1), но в настоящее время переносимый ив НТМГ. Свои сильные и сла- 
бые стороны есть как у микроформатов, так и у КрЕа. Это два диаметрально про- 
тивоположных подхода к решению одной и той же задачи: оснастить веб-страницы 
дополнительной семантикой, которую нельзя выразить средствами собственно язы- 
ка НТМГ. Этой главой я не хотел бы спровоцировать войну между сторонниками 
двух форматов (иначе было бы просто не обойтись без тега <гапі>!). Вот почему 
я сосредоточусь на третьем механизме, входящем в состав НТМТЬ и тесно инте- 
грированном с ним. Это микроданные. 
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Что такое микроданные? 


Будьте внимательны: в следующем предложении важно каждое слово. 


СЕКРЕТЫ РАЗМЕТКИ 


Микроданные обогащают РОМ парами «имя — значение», взятыми из пользовательских словарей и имеющими 
определенную область видимости. 


Что же это значит? Будем разбираться в обратном порядке, от конца к началу. 

Центральное понятие в системе микроданных — пользовательский словарь. 
Множество всех элементов НТМТ.5 — это как бы один словарь, который содержит 
элементы для представления раздела, статьи (см. раздел «Новые семантические 
элементы НТМТ.5» главы 3), но не содержит таких элементов, которыми можно 
было бы представить человека или событие. Если вы желаете представить на веб- 
странице человека, вам надо определить свой собственный словарь. Это и позво- 
ляют сделать микроданные. Каждый может, создав словарь микроданных, начать 
пользоваться на веб-страницах нестандартными атрибутами. 

Далее, о микроданных следует знать, что они оперируют парами «имя — значе- 
ние». Каждый словарь микроданных объявляет набор именованных свойств. Напри- 
мер, словарь Регѕоп, описывающий человека, может объявлять свойства пате, рпоёо 
ит. п. Чтобы на ваших веб-страницах работало то или иное свойство, нужно указать 
его имя в специально предназначенном для этого месте. В зависимости от того, где 
конкретно вы объявите имя свойства, механизм микроданных будет по-разному об- 
рабатывать его значение (подробнее об этом читайте в следующем разделе). 

В основе системы микроданных лежат не только именованные свойства, но 
и такое понятие, как «область видимости» (ѕсоре). Его легко осмыслить, вспомнив, 
каковы естественные отношения между родительскими и дочерними элементами 
в РОМ. Контейнер < т> (см. раздел «Корневой элемент» главы 3) обычно со- 
держит два дочерних тега: <һеаф> (см. раздел «Элемент НЕАР» главы 3) и <роду>. 
У тега <Боду>, как правило, много потомков, и у каждого из них могут быть свои 
собственные потомки. Так, например, на странице может иметься тег <ћ1> внутри 
<һдғоир>, обернутой в <һеайег> (см. раздел «Верхние колонтитулы» главы З) — пря- 
мой потомок <р0ду>. Точно так же обыкновенная таблица — это теги <4> внутри 
<іг> внутри < а е> (внутри <Боду>). С точки зрения системы микроданных иерар- 
хия РОМ позволяет заявить: «Все свойства такого-то элемента взяты из такого- 
то словаря». Благодаря этому на одной и той же странице можно пользоваться 
несколькими словарями микроданных. Разрешается даже вкладывать словарь 
внутрь словаря: все это можно делать благодаря использованию естественной 
структуры РОМ (в этой главе будут показаны примеры вложенных словарей). 

Раз уж я заговорил о РОМ, то выскажусь по этой теме более развернуто. Ми- 
кроданные — это способ присвоить дополнительную семантику тем данным, ко- 
торые уже присутствуют на веб-странице. Микроданные разрабатывались не как 
самостоятельный формат, а как дополнение к НТМІ. В следующем разделе вы 
увидите, что применять микроданные лучше всего в том случае, когда возможности 
НТМЕ используются правильно, но словарю НТМТ, просто не хватает выразитель- 
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ности. Итак, микроданные — хороший инструмент для «тонкой семантической 
настройки» тех сведений, которые уже есть в РОМ. Если же вы хотите сделать 
семантическими данные, которых в ООМ пока нет, стоит вернуться на шаг назад 
и задуматься о том, уместно ли использование микроданных. 

Стала ли теперь для вас яснее формулировка «секрета», с которого мы начали 
этот раздел? Надеюсь, да. Теперь посмотрим на микроданные в деле. 


Структура микроданных 


Определить пользовательский словарь микроданных несложно. Прежде всего для 
этого потребуется пространство имен, то есть просто О ВГ-адрес. Не требуется 
строго, чтобы О ВТ. пространства имен указывал на работающую веб-страницу. 
Пусть, например, я решил создать словарь микроданных, который бы описывал 
человека. Пусть, кроме того, я владею доменом ааа-уосаБ\агу.огд. Тогда в качестве 
пространства имен для своего словаря я воспользуюсь О ВГ-адресом ћр://ааѓа- 
мосаб\агу.ого/Регсоп. Итак, достаточно выбрать ОВТ. на контролируемом вами до- 
мене, чтобы создать вполне уникальный идентификатор. 

В словаре мы будем объявлять разные именованные свойства. Начнем с трех 
базовых свойств: 


О пате — полное имя пользователя; 
О рһоёо — ссылка на картинку с изображением пользователя; 


О иг1 — ссылка на сайт, с которым пользователь тем или иным образом связан, 
например блог или Соов1е-профиль. 


Значение первого из этих свойств — обычный текст, а остальных двух — ОВТ- 
адреса. Не нужно задумываться о микроданных и словарях, чтобы понять, что все 
это хорошо применимо к страницам, сверстанным естественным образом. 

Вообразим, что у вас есть страница-профиль или страница «Обо мне». На ней 
ваше имя, вероятнее всего, помещено в позицию заголовка, то есть внутрь тега <ћ1> 
или подобного. Ваша фотография, чтобы ее могли видеть посетители страницы, 
заключена в контейнер <1т9>, а все связанные с вашим профилем ОКІ -адреса име- 
ют вид гиперссылок, на которых посетители могут щелкать. Предположим, что ваш 
профиль обернут в тег <ѕесііоп> и тем самым отделен от остального содержимого 
страницы. Пример": 


<ѕесііоп> 
<11>Марк Пилгрим</ћ1> 
<р><1іто ѕгс="ПЕЕр: / Лам. ехатрТе. сот/рһоёо. јро" а1{="[это я улыбаюсь 1"></р> 
<р><а һгет= "һр: //а1уеіпЕотагк .ого/ ">Мой блог</а></р> 

</ѕесііоп> 


Структуру (модель) микроданных образуют пары «имя — значение». Имя 
свойства микроданных (в нашем примере папе, рһоїо или иг1) всегда объявляется 


В этой главе в англоязычных примерах автора последовательно переводились имена 
и фрагменты связных текстов, а адреса мы оставили в неприкосновенности. — Примеч. 
перев. 
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в НТМГ-элементе. Соответствующее значение свойства извлекается из РОМ- 
представления данного элемента. Для большинства элементов НТМІ. значение — 
всего лишь текстовое содержимое. Есть, однако, несколько нетривиальных слу- 
чаев, которые перечислены в табл. 10.1. 


Таблица 10.1. Откуда извлекаются значения свойств микроданных 


Тег Значение 
<тёа> Атрибут сопїепі 
<аџйіо> Атрибут $гс 
<етђеа> 

<іѓате> 

<ітд> 

<ѕошгсе> 

<маео> 

<а> Атрибут һгеғ 
<агеа> 

<Ііпк> 

<објесі> Атрибут ааа 
<іте> Атрибут ааѓќейте 
Все остальные Текстовое содержимое 


Добавить микроданные на страницу — значит просто добавить несколько новых 
атрибутов в уже имеющиеся НТМІ -элементы. Первым делом всегда объявляют, 
какой именно словарь микроданных используется. Это делает атрибут 1{етуре. 
Второе, что следует сделать, — объявить область видимости словаря с помощью 
атрибута 1{етзсоре. В данном примере все сведения, которые мы хотим семантиче- 
ски разметить, находятся внутри тега <5есїіоп>, а значит, именно в <5есііоп> мы 
объявим оба атрибута: іїетёуре и 1{етзсоре: 


<ѕесііоп 1%етзсоре іёепёуре=”һЕЄр: //дафа-умосаБи] агу.огд/Регоп”> 


Ваше имя — первый фрагмент данных, значимых для нас в контейнере <ѕесііог. 
Имя обернуто заголовком <ћ1>, который не требует никакой специальной обработ- 
ки и попадает в категорию «всех прочих элементов» табл. 10.1. Поэтому значением 
свойства микроданных окажется просто-напросто текстовое содержимое (если бы 
имя было обернуто элементом <р>, < \> или <ѕрап>, ничего бы не поменялось): 


<й1 1$етргор=”пате”>Марк Пилгрим</ћ1> 


По-русски эта запись означает: «Вот свойство пате словаря микроданных НЁр:// 
Чака-уосаб\агу.ога/Регзоп. Значение свойства — текстовая строка Марк Пилгрим». 
Следующее на очереди — свойство рһоёо. Предполагается, что это О ВТ-адрес. Со- 
гласно табл. 10.1, «значением» тега <іто> является значение в его атрибуте ѕгс. Но ведь 
там, в <іпо 5гс>, уже и находится О ВТ. фотографии из вашего профиля! Значит, надо 
просто объявить, что значение свойству рһоёо присваивается из тега <іто>: 
<р><1іто іёетргор=”рһоёо” 
Ѕрс="ПЕЕр : / Лима. ехатрТе. сот/рһоїо. јрд" 
а1{="[это я улыбаюсь ]"></р> 


Структура микроданных 171 


По-русски это значит: «Вот свойство рһоїо словаря микроданных НЁр://дака- 
уосабиагу.ого/Регѕоп. Значение свойства равно Ир: / мм. ехатр1е. сот/рһоёо. јр». 

Наконец, свойство иг1 тоже представляет собой ОВТ.-адрес. Согласно табл. 10.1, 
«значением» тега <а> является значение в его атрибуте пгет. Это опять идеально 
соответствует уже существующей разметке. Осталось только сказать, что ваш тег 
<а> — носитель значения свойства иг]: 


<а їёетргор=”иг1” пгет=" р: / /аіуеіпіотагк .огд/">Мой блог</а> 


По-русски это значит: «Вот свойство иг1 словаря микроданных ћр://ааќа- 
уосаБ\агу.огд/Регзоп. Значение свойства равно Ир: / /аіуеіпёотагк.ого/». 

Если сверстанная вами страница выглядит немного иначе, это, конечно, не 
проблема. Свойства и значения микроданных можно вписывать в любой НТМТ- 
код, даже код родом из замшелого ХХ века, из времен табличной верстки, код 
в стиле «Да будет проклят тот день, когда я согласился работать с этим кошма- 
ром». 

Вообще-то верстать так, как показано ниже, в наши дни отнюдь не рекоменду- 
ется. Но подобные конструкции все еще очень популярны, и ничто не мешает «на- 
весить» на них микроданные: 


<ТАВЕЕ> 
<ТВ><ТО>Иня<ТО>Марк Пилгрим 
<ТА><Тр>Ссылка<тр> 
<А һге?=# опс1іск=доЕхіегпа1іпк() >р: / /діуеіпёотагк.огод/</А> 
</ТАВЕЕ> 


Для присвоения значения свойству пате достаточно добавить атрибут іёетргор 
к той клетке таблицы, которая содержит искомое имя. Никаких специальных пра- 
вил работы с микроданными для ячеек таблицы не определено, поэтому свойству 
микроданных будет присвоено значение по умолчанию, то есть текстовое содер- 
жимое элемента: 


<ТК><ТО>Имя<ТО іёетргор=" пате" >Марк Пилгрим 


Сложнее будет добавить свойство иг1. В показанном фрагменте НТМІ -кода тег 
<а> используется неправильно. Его атрибут Иге{ не содержит ни ссылки на внешний 
ресурс, ни вообще чего-либо полезного, а для извлечения целевого ОВІ -адреса 
и перехода по ссылке используется Јауа$Ѕсгірі-функция в атрибуте опс1іск (сама 
функция в коде не показана). Чтобы еще запутать дело, вообразим, что функция 
доЕхіегпа1_їпк(), проходя по ссылке, открывает документ в маленьком всплыва- 
ющем окне без полосы прокрутки (в прошлом веке в Интернете, право же, было 
много затейников!). 

Даже при этих условиях код можно разметить микроданными, надо лишь про- 
явить немного изобретательности. О прямом использовании тега <а> речи вообще 
не идет. Адрес, на который указывает ссылка, содержится не в атрибуте Пгет, а пра- 
вило «В тегах <а> значения свойств микроданных равны значениям атрибутов һгеѓ» 
переформулировать нельзя. Но можно воспользоваться элементом-оберткой для 
всего нашего безобразия и установить значение свойства микроданных иг] с его 
помощью: 
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<ТАВЕЕ 1{етзсоре 1$етбуре=" Ир: / /дафа-уосаБиТагу .ога/Регзоп"> 
<ТК><ТО>Имя<ТО>Марк Пилгрим 
<ТВ><ТО>Ссылка<ТО> 
<ѕрап 1фетргор=”иг1”> 
<А һге?=# опс1іск=доЕхіегпа1іпк() >р: //А1уетифотагК .огд/</А> 
</зрап> 
</ТАВЕЕ> 


Поскольку тег <ѕрап> не обрабатывается специальным образом, он подчиняется 
общему правилу: «Значение свойства микроданных равно текстовому содержимо- 
му». «Текстовое содержимое» здесь не равносильно всему коду внутри элемента 
(как было бы, скажем, в ООМ-свойстве 1ипегНТМГ). Речь идет о тексте и только 
о тексте. В данном случае ћ&р://аімеіпіотагк.ога/ — текстовое содержимое тега <а>, 
заключенное в контейнер <ѕрап>. 

Подведем итоги. Свойствами микроданных можно разметить любой код. Если 
НТМІ. используется правильно, то микроданные добавлять легче, если неправиль- 
но, то труднее, но вообще это может быть сделано всегда. 


Разметка данных о человеке 


Примеры, которые открывают предыдущий раздел, не выдуманы. Для разметки 
сведений о людях действительно существует словарь микроданных, и он в самом 
деле настолько просто устроен. Присмотримся к нему ближе. 

Чтобы оснастить личный сайт микроданными, проще всего встроить их в страни- 
цу «Об авторе». На вашем сайте ведь есть страница «Об авторе», правда? Если нет, 
следите за тем, как я буду добавлять к образцу такой страницы (Һір://аімеіпёоћіті5. 
огд/ехатріеѕ/регѕоп.ћті) дополнительную семантику. Вот полученный мною резуль- 
тат: Һ№р://аімеіпіоћті5.огод/ехатріеѕ/регѕоп-ріІиѕ-тісгоааќа.Һёті. 

Сначала посмотрим на НТМТ-код, каким он был до внесения в него каких-либо 
свойств микроданных: 


<ѕесілоп> 
<іто міаєћ="204" һеідһі=" 250" 
$гс=" Ир: //аіуеіпіоћіті5.огод/ехатр1еѕ/2000 05 тагк. јро" 
а1{=" [Марк Пилгрим, ок. 2000 г. ]"> 
<һ1>Контактные сведения</һ1> 
<а1> 
<ат>Имя</аї> 
<аа>Марк Пилгрим</аа> 
<аё>Должность</ а> 
<аа>Технический евангелист, боод1е, Іпс.</4д> 
<аї>Почтовый адрес</ > 
<аа> 
00 Мати Ѕігее<рг> 
Апусоми, РА 19999<рг> 
США 
</аа> 
</91> 
<П1>Я в сети</й1> 
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<и1> 
<11><а һге?= "һер: //аїуеіпЕотагк .ого/ ">мой блог</а></11> 
<11><а һге?= "Пер: / Лим. доодЛе. сот/рго?і1еѕ/рі1огіт">мой профиль боод1е</а></ 
11> 
<11><а һге?= "Пер: / Лам. геда1® . сот/иѕег/МагкРі1огіт">мой профиль Кеааії. сот</ 
а></11> 
<11><а һгет= "һер: / /ммм . м бег. сот/аіуеіпёотагк">мой Тмісег</а></11> 
</и]> 
</ѕесііоп> 


Что надо сделать прежде всего, так это объявить, какой словарь используется 
и какова область видимости каждого из добавляемых свойств. Это делается с по- 
мощью атрибутов іїепёуре и іїетѕсоре, определенных на самом внешнем элементе, 
то есть содержащем дочерние элементы с информацией, важной для нас. В данном 
случае таков тег <ѕесііоп>: 


<ѕесілоп іетѕсоре іёетёуре="һЕёр: //афа - уосаБи1агу.огд/Регѕоп"> 


# а 

+7. ЗВ ПРИМЕЧАНИЕ 

а За изменениями, которые в этом разделе мы вносим в код страницы, вы можете просле- 
“. 4х, дить в режиме онлайн. Было: Һ&р://аімеіпіоћті5.огд/ехатріеѕ/регѕоп.һёті; стало: Һр:// 


аіуеіпёоћёті5.огд/ехатріеѕ/регѕоп-ріиѕ-тісгоааќа.Һіті. 


Теперь можно начать задавать свойства микроданных из словаря НЁр://дака- 
уосабиіагу.огд/Регѕоп. И какие же это свойства? Их список вы увидите, обратившись 
к самой странице Һ&р://Яаїа-уосабиіагу.огд/Регѕоп. Спецификация микроданных это- 
го не требует, но таков, я бы сказал, «передовой опыт». И если вы желаете, чтобы 
вашим словарем микроданных стали пользоваться веб-разработчики, то придется 
его документировать. Где же уместнее расположить документацию, как не по ОВТ- 
адресу словаря? 

В табл. 10.2 перечислены свойства словаря Регѕоп. 


Таблица 10.2. Словарь Регѕоп 


Свойство Описание 

пате Имя 

піскпате Прозвище 

рһоѓо Ссылка на изображение 

їе Должность человека (например, «Менеджер по финансам») 

гоіе Профессиональные обязанности человека (например, «Бухгалтер») 

ий Ссылка на веб-страницу (например, на личную страничку человека) 

а 1іайоп Название организации, с которой человек связан (например, фирмы-нанимателя) 

Гепа Свидетельствует о характере общественного отношения между данным челове- 
ком и кем-либо еще 

сопќасі Свидетельствует о характере общественного отношения между этим человеком 
и кем-либо еще 

асаиаіпќапсе | Свидетельствует о характере общественного отношения между данным челове- 
ком и кем-либо еще 

аййгеѕѕ Местонахождение человека (доступны дочерние свойства ѕігееі-айагеѕѕ, Іосаіїку, 
гедіоп, роэа|-соде и соипігу-пате) 
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Наш образец страницы «Об авторе» начинается с моей фотографии. Есте- 
ственно, на фотографию ссылается тег <1тд>. Объявить, что этот <119> — картин- 
ка из моего пользовательского профиля, очень легко; надо лишь добавить атри- 
бут іетргор="рһоїо": 
<іто 1$етргор=”риофо” міаћ="204" һеідһі=" 250" 

$гс=" Ир: //аіуеіпіоћіті 5 .огд/ехатр1е$/2000_05 тагк. јро" 
а1{="[ Марк Пилгрим, ок. 2000 г. ]"> 


Что из этого будет присвоено как значение свойству микроданных рһоїо? Зна- 
чение атрибута ѕгс. Из табл. 10.1 можно вспомнить, что «значение» тега <іто> при- 
равнивается к значению его атрибута ѕгс. У каждого корректно работающего <іто> 
есть атрибут ѕгс (иначе фотография будет «битая»), который всегда выражается 
ОВГ-адресом. Уловили основную мысль? Если пользоваться НТМІ. правильно, 
то освоить разметку микроданных не составит труда. 

Более того, на странице есть не только тег <1т9>. Это дочерний элемент контей- 
нера <ѕесііоп> — того самого, в который мы только что вписали атрибут іїетѕсоре. 
Отношения между родительскими и дочерними элементами страницы микродан- 
ные используют по-своему: для определения области видимости свойств. По- 
русски мы бы сказали: «Данный тег <ѕесііоп> представляет человека. Все свойства 
микроданных, определенные в дочерних тегах <ѕесііоп>, — не что иное, как свойства 
этого человека». Тег <ѕесііоп> можно (если так удобнее) вообразить в роли под- 
лежащего в предложении. Тогда атрибут 1{етргор будет чем-то вроде сказуемого — 
«изображен» и т. п., а значение свойства микроданных окажется дополнением: 


Этот человек [явное указание <5есНоп іќетѕсоре Ќетќуре="...">] 

изображен [явное указание <іто ќетргор="рһоїо">] 

на фото Һр://аімеіпёоћті5.огд/ехатріеѕ/2000_05_ тагк.јро [скрытая ссылка из атрибута 
<1т9 $гс>] 


«Подлежащее» надо обозначить всего раз, оснастив самый внешний тег <5есііоп> 
атрибутами іїетѕсоре и ііепёуре. «Глагол» задан атрибутом іетргор="рһоёо" в теге 
<іто>. «Дополнение» вообще не следует размечать каким-либо особым образом, 
потому что из табл. 10.1 известно: свойство микроданных в теге <іто> приобретет 
то же значение, что и атрибут згс. 

Перейдя к следующему фрагменту кода, мы увидим заголовок <ћ1> и начало списка 
определений <а]1>. Ни <ћ1>, ни <01> размечать микроданными не надо. Вообще далеко 
не каждому тегу в НТМГ-коде должно соответствовать свойство микроданных. Ведь 
микроданные сконцентрированы вокруг свойств, а не заголовков и не технических 
элементов верстки, которыми свойства окружены. Тег <11> в нашем примере — не свой- 
ство, а всего лишь заголовок. Так же и <{> со словом Имя — не свойство, лишь метка. 


<һ1>Контактные сведения</1> 
<а1> 
<ат>Имя</аї> 
<аа>Марк Пилгрим</аа> 


Сама информация хранится в теге <0>, на который мы и должны «навесить» 
атрибут іїетргор. Это будет свойство микроданных папе; система присвоит ему 
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значение, равное строке текста внутри <99>. Нужна ли какая-то особая разметка? 
Если верить табл. 10.1 — нет: теги <99> обрабатываются стандартным образом, 
и значением свойства становится сам текст внутри тега. 

Итак, в коде стало: 


<94 іёетргор="пате">Марк Пилгрим</а9> 


По-русски мы бы сказали просто-напросто: «Этого человека зовут Марк Пил- 
грим». Хорошо, пойдем дальше. 

С двумя следующими свойствами дело будет обстоять сложнее. Вот как вы- 
глядит НТМТ-код до нанесения разметки микроданных: 


<а>Должность</аї> 
<аа>Технический евангелист, боод1е, Іпс.</аа> 


Взглянув на словарь Регѕоп, вы поймете, что текст «Технический евангелист, 
Сооз[е, пс.» заключает в себе, собственно, два свойства: 1111е («Технический еван- 
гелист») и а 11 1а{1оп («Сооз[е, Ірс.»). Как можно выразить это с помощью микро- 
данных? Вкратце говоря, никак. Микроданные не умеют дробить целую строку 
текста на самостоятельные свойства. Нельзя сказать: «Первые 18 символов этого 
текста занесем в одно свойство микроданных, а остальные 12 символов — в другое 
свойство микроданных». 

Однако не все потеряно. Что, если бы вы, например, захотели отображать текст 
«Технический евангелист» иным шрифтом, чем текст «Соозе, Гас.»? С$5 не предо- 
ставляет такого способа. Остается обернуть разные части надписи в «холостые» 
теги, такие как <ѕрап>, и применить к каждому из них различные С$$-правила. 

Полезно так же поступать с микроданными. Когда в единой строке содержатся 
два относительно независимых фрагмента информации, например, как в нашем 
образце, потенциальные {141е и а" 111 1а{1оп, то достаточно обернуть каждый фраг- 
мент в <ѕрап> и каждый <ѕрап> объявить особым свойством микроданных: 


<аї>РоѕіЕіоп</ а> 
<ад><ѕрап іёетргор=”1іЕЛе”>Технический евангелист</ѕрап> Тог 
<ѕрап 1фетргор=” а 11 1а{1оп”>боод]е, Іпс.<ѕрап></аа> 


Ура! Вот то же самое в переводе на русский: «Должность этого человека — тех- 
нический евангелист. Наниматель этого человека — компания Соозе, [шс.>. Два 
предложения — два свойства микроданных. Разметка чуть усложнилась, но это 
усложнение оправданно. 

Схожее решение применяется и для разметки данных об адресах. В словаре 
Регзоп объявлено свойство аййгеѕѕ, которое выступает и как самостоятельная еди- 
ница микроданных. У свойства аййгеѕѕ собственный словарь (Нр://Ча{а-мосабщагу. 
огд/Ааагеѕѕ). Ему подчинено несколько дочерних свойств: ѕігееї-аййгеѕѕ, Тоса1іїу, 
гедіоп, роѕїа1 -соде и соипігу-пате. 

Если вы программист, то вам, вероятно, знакома «точечная» нотация, в которой 
принято описывать объекты и их свойства. Рассмотрим следующий набор: 


О Регѕоп; 
О Регѕоп.аййғеѕѕ; 
О Регѕоп.аййгеѕѕ.ѕігееї-аййгеѕѕ; 
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О Регѕоп.айагеѕѕ. Тоса11їу; 

О Рег5оп.адагез$ .гедтоп; 

О Рег5оп.адагез$ .ро$фа1-сое; 
О Рег5оп.адаге$$ .соитгу-папе. 


В нашем примере весь адрес содержится в единственном теге <49> (напомню, 
тег <4{> — просто метка, в расширении семантики с помощью микроданных он 
никакой роли не играет). Значит, можно было бы записать свойство аййгеѕѕ без 
ухищрений, просто добавив атрибут ііетргор в тег <99>: 


<аї>Почтовый адрес</ а> 
<94 ісетргор="аайгеѕѕ"> 


Но не стоит забывать о том, что свойство аййгеѕѕ — самостоятельная единица 
микроданных. Теперь нам снова пригодятся атрибуты іёетѕсоре и іёетіуре: 


<аї>Почтовый адрес</ > 
<94 ісетргор="аайгеѕ5" 1$етзсоре 
Сетфуре=” Тр: //Чафа-хосаБи1агу. огд/АЧаге$$”> 


Все это мы уже видели, но только применительно к единицам самого верхнего 
уровня. Атрибуты 1{етуре и іїетѕсоре были определены в теге <ѕесііоп>, и все дочер- 
ние теги <ѕесііоп>, оснащенные свойствами микроданных, находились в «области 
видимости» словаря Регѕоп. Сейчас мы впервые сталкиваемся с вложенными обла- 
стями видимости: новые ііепіуре и 1%етзсоре (в теге <00>) переопределяют существу- 
ющие атрибуты (в теге <ѕесііоп>). Система вложенных областей видимости работает 
точно так же, как НТМГ. РОМ. У тега <94> есть сколько-то дочерних элементов, и все 
они входят в область видимости словаря, объявленного в <94>. Но как только тег <99> 
закрывается соответствующей конструкцией </00>, мы возвращаемся в область види- 
мости словаря, который определен в родительском теге (в данном случае <ѕесїіоп>). 

Словарь микроданных Аййгеѕѕ страдает той проблемой, которую мы уже рас- 
смотрели на примере свойств ї111е и а??і1іаііоп. Адрес — одна большая строка, 
которую мы хотим разбить на несколько самостоятельных свойств микроданных. 
Решение прежнее — обернуть каждый информативный фрагмент в <ѕрап> и поста- 
вить каждому <ѕрап> в соответствие по одному свойству микроданных: 


<9Ч їёетргор="ааагеѕ5" 1ёетѕсоре 
їсепеуре=" Ир: //дафа-уосариагу.огод/Аайгеѕ5"> 

<ѕрап 1фетргор=” ѕЕгееі- аййгеѕ5”>100 Маїп 5гееї</ѕрап><рг> 
<ѕрап 1%етргор=”Тоса11фу”>Апубоми</ рап>, 
<ѕрап 1%етргор=”гед1оп”>РА</ рап> 
<ѕрап 1фетргор=”розфа1 -соде”>19999</ зрап> 
<ѕрап 1$етргор=” соипгу-пате”>0$А</ ѕрап> 

</ад> 

</а1> 


Итак, по-русски: «У этого человека есть почтовый адрес. Та часть адреса, кото- 
рая содержит номер дома и название улицы, выглядит как 100 Мат Ѕігееё. Насе- 
ленный пункт называется Апубо\т. Код региона — РА (штат Пенсильвания). По- 
чтовый индекс — 19999, а страна — США». Все проще простото. 
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РАЗМЕТКА В ВОПРОСАХ И ОТВЕТАХ 


Вопрос: Специфичен ли для США описанный выше фор- ры, все это без различия попадет в свойство ѕїгееї- 
мат почтовых адресов? айгеѕ: 

Ответ: Нет. Свойства словаря Аййгеѕѕ в достаточной <р іёетргор="ааагеѕ5" 1Еетѕсоре 

мере обобщенные и способны описывать большин- ісетіуре=" Ир: //дафа-хосаБиТагу. 
ство почтовых адресов в мире. Не во всех адресах огд/Адагез$"> 

значение будет присваиваться в точности каждому <ѕрап 1{етргор=" ѕїгее-айдгеѕѕ"> 
свойству, но это не страшно. Есть адреса, которые, 100 Мати Ѕїгееё 

возможно, потребуют в каких-либо свойствах более ие 415 

чем по одной «строке»; это тоже не страшно. Так, </зрап> 

например, если в состав вашего почтового адреса т 


входят название улицы, номер дома и номер кварти- 


На странице «Об авторе», выступающей в этом примере как образец, есть еще 
список О ВТ-адресов. В словаре Регѕоп задано соответствующее свойство под име- 
нем иг]. Это, в сущности, может быть любой веб-адрес (хотя и обязательно веб- 
адрес, как вы понимаете). Я хочу сказать, что определение свойства игі чрезвы- 
чайно расплывчато. Под него подходит любой ОВГ-адрес, который вам угодно 
связывать с человеком: адрес блога, фотогалереи, профиля на таком стороннем 
сайте, как ЕасерооК и Тұіќќег. 

Важно заметить здесь, что одному человеку может быть поставлено в соответ- 
ствие несколько свойств иг]. Говоря технически, значение каждого свойства может 
быть определено более чем однажды. Но вплоть до настоящего момента мы не 
знали, как применить эту возможность с пользой для себя. Можно, оказывается, 
держать две фотографии (в свойствах рһоїо) с разными ОКІ -источниками карти- 
нок. В данном примере четыре разных О ВТ--адреса: мой блог, мой профиль в Сооё/е, 
мой пользовательский профиль Ведай.сот и моя учетная запись Ту ег — будут 
перечислены единым списком. С точки зрения НТМТ-кода имеем список из четы- 
рех ссылок: четыре тега <а>, на каждый из которых приходится собственный пункт 
списка <11>. С точки зрения разметки микроданных каждому тегу <а> присвоен 
атрибут іёетргор="иг1": 
<П1>Я в сети</һ1> 
<и1> 
<11><а һге?="ҺЕЕр: / /Ч1уетифотагК .ога/" 
їёетргор=”иг1”>мой блог</а></11> 
<11><а пге=" Ир: / Лам. доодТе. сот/рго?11еѕ/ріТогіт" 
іёетргор=”иг1”>мой профиль боод1е</а></11> 
<11><а һге?="ПЕЕр: / /ммм. геддії. сот/иѕег/МағкРі1оғіт" 
іёетргор=”иг1”>мой профиль Кеааії. сот</а></11> 
<11><а һге?= "Һр: / Лам. м7 5 бег . сот/ 1 уетифотагК" 
іёетргор=”иг1”>мой ТитЕег</а></11> 


</и> 


Согласно табл. 10.1, теги <а> обрабатываются особым образом: значение свой- 
ства микроданных приравнивается к значению атрибута һгеѓ?, а не к вложенному 
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текстовому содержимому. Таким образом, вовсе не обращая внимания на текст 
каждой ссылки, процессор микроданных узнает (в переводе на русский язык) 
следующее: «У этого человека есть ОКІ -адрес ћр://аімеіпіотагк.ого/. Еще у это- 
го человека есть ОКІ-адрес НЁр://мим.дооде.сот/ргое$/рИдйт, а также ОВТ- 
адрес Һр://мму.геааі.сот/иѕег/МагкРіідгіт и ОКІ-адрес Һр://уму.бміег.сот/ 
аімеіпіотагк». 

Знакомство с Соое ВісЬ Ѕпірреѓѕ. Вернемся на шаг назад и спросим себя, 
зачем все это нужно. Не добавляем ли мы новую семантику просто ради того, что- 
бы добавить новую семантику? Конечно, нет. Не следует думать, будто мне больше 
вашего нравится возиться с угловыми скобочками. Но почему именно микродан- 
ные и зачем вся эта суматоха вокруг них? Есть два больших класса приложений, 
способных работать с микроданными НТМІ5: 


О браузеры; 
О поисковые системы. 


Для браузеров в спецификации НТМТ.5 определен набор функций РОМ АРІ, 
которые позволяют извлекать из веб-страниц целостные объекты микроданных, 
свойства и значения свойств. На момент написания этих строк ни один браузер не 
поддерживал данный АРТ. Вообще ни один. Это, пожалуй, тупик, по крайней мере 
до тех пор, пока производители браузеров не задумаются о реализации соответ- 
ствующего АРІ на клиентской стороне. 

Другой крупный «потребитель» НТМТ-кода — поисковики. Что может поис- 
ковая система сделать со свойствами микроданных, описывающими человека? 
А если отображать в выдаче не просто название страницы и фрагмент ее текста, 
а какую-либо комбинацию наших структурированных данных? Например, полное 
имя, название должности, наниматель, адрес, возможно, уменьшенная, в режиме 
предварительного просмотра, пользовательская картинка. Привлекло бы это ваше 
внимание? Мое — да. 

Соозе поддерживает микроданные в рамках программы КісЬ Ѕпірресѕ (И р:// 
умм.доодіе.сот/ѕиррогі/мебтаѕїегѕ/біп/апѕуег.ру?ћ=еп&апѕуег=99170). Когда 
программа-краулер Соозе разбирает страницу и находит при этом свойства ми- 
кроданных, имена которых удовлетворяют словарю ПИр://Чака-уосаБбагу.огд/Регоп, 
значения таких свойств извлекаются и сохраняются особо. Соое предоставляет 
удобный инструмент для визуализации того, как поисковая система «видит» свой- 
ства микроданных. Наша страница «Об авторе», оснащенная разметкой микро- 
данных (Һр://аімеіпіоћті5.ого/ехатріеѕ/регѕоп-ріиѕ-тісгоааќа.Һёт!і), с точки зрения 
поисковой системы выглядит так: 


Тет 
Туре: Пр: //дафа-хосабиТагу. огд/регзоп 
рпоїо = Ир: //Ч1уелибой и] 5 .огод/ехатр1еѕ/2000 05 так. јро 
пате = Марк Пилгрим 
їе = Технический евангелист 
а? 11аёліоп = боод1е, Тис. 
аййгеѕѕ = Ібет( 1 ) 
иг] = Ир: //аіуеіпіотагк.ого/ 
игі = Ир: / /ммм . доодТе. сот/рго?Ғі1еѕ/рі19гіт 
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игі = Ир: / /ммм . геаӢаії. сот/иѕег/МагкРі1огіт 

иг] = Пр: //ммм мег. сот/аіуеіпіотагк 
Цет 1 

Туре: Ир: //Чафа-уосаБиТагу. огд/а@4гез$ 

${гее-аЧгез$ = 100 Маіп 51гееї 

Тоса11у = Апубомп 

гедіоп = РА 

роѕїа1-сойе = 19999 

соипЕгу-пате = ЏЅА 


Здесь все: свойство рһоѓо из атрибута <іто $гс>, все четыре О ВТ-адреса из атри- 
бутов <а пгеР> перечисленных списком ссылок и даже адрес (выступающий здесь 
как Цет 1) со всеми пятью его дочерними свойствами. 

Как же Соое пользуется всей этой информацией? Бывают разные случаи. Во- 
прос о том, как отображать свойства микроданных, какие именно из них и следует 
ли их вообще отображать, лишен жесткой регламентации. Если Соое определит, 
что наша страница «Об авторе» должна войти в результаты выдачи при поиске на 
Магк РТТаг1м, и система сочтет, что оригинальную разметку микроданных на нашей 
странице можно показать пользователю, то поисковая выдача может выглядеть при- 
близительно так, как показано на рис. 10.1. 


Арош Мак РіІагіт 
Апуюмт РА - Веуеюорег адуоса - Соодје, Іпс. 


Ехсегрї гот {пе раде мї! ѕһом ир һеге. 
Ехсегр! от ће раде мї! ѕһом ир һеге. 
аіуеіпіоћёті5 .огд/ехатріеѕ/регѕоп-ріиѕ-тісгодаќа.һіті - Сасһеа - Ѕітіаг радеѕ 


Рис. 10.1. Образец поисковой выдачи, содержащей страницу, 
на которой информация о человеке размечена микроданными 


Первая строка — это заглавие страницы, содержащееся в теге <{1{1е>. Ничего 
удивительного — так Соое поступает со всеми страницами. Вторая строка пол- 
на сведений из разметки микроданных, которой мы оснастили страницы. АпуЁомп 
РА — часть почтового адреса, размеченного как одно из свойств словаря НЁр:// 
ака-уосаБ\агу.ога/АЧагез$. Веуе1Торег а\осате и б009]е, Іпс. — значения двух 
свойств из словаря НЁр://Ча{а-уосабагу.ога/Регзоп (+1+1е и а##і1іаііоп соответ- 
ственно). 

Этот опыт свидетельствует о том, что для оптимизации поисковой выдачи не 
нужно представлять крупную корпорацию и специально, за деньги, договаривать- 
ся с командой разработчиков поисковой системы. Достаточно потратить десять 
минут на добавление кое-каких НТМІ -атрибутов в данные, которые вы уже и так 
опубликовали. 


РАЗМЕТКА В ВОПРОСАХ И ОТВЕТАХ 


Вопрос: Я сделал все, как вы сказали, но поисковая вы- Ответ: «Соодіе не может гарантировать, что разметка 
дача б009/е не изменилась. Что не так? микроданных, присутствующая на какой-либо странице 
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или сайте, будет использована в результатах поис- 
ка» (һтїр://мумум.доодіе.сот/ѕиррогі/мертаѕїегѕ/ 
Ып/апзмег.ру?Н|= еп&апѕууег=99170). Даже если 
Соодіе не обратит внимания на вашу разметку ми- 
кроданных, мимо нее может не пройти другая по- 
исковая система. Ведь микроданные, каки все про- 
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чее в спецификации НТМІ5, определяются открытым 
стандартом, который может реализовать любой же- 
лающий. Ваша задача — предоставить максимум 
данных, а другие пусть, в свою очередь, думают, 
что с этими данными делать. Возможно, вас при- 
ятно удивят их находки! 


Разметка данных об организации 


Микроданные не привязаны к одному-единственному словарю. «Об авторе», ко- 
нечно, хорошая страница, но у вас такая страница, скорее всего, одна. Жаждете 
нового опыта? Научимся оснащать микроданными страницы организаций и пред- 
приятий. 

Я создал несложный образец страницы данных об учреждении (Һр://аімеіпёоћіті5. 
ога/ехатріеѕ/огдапізайоп.ћті). Рассмотрим первоначальный НТМІ -код этой страни- 
цы, без разметки микроданных: 


<агііс1е> 
<һ1>боод1е, Іпс.</һ1> 
<р> 
1600 АтрһіЕћеаїғе Рагкмау<бг> 
Моипёаіп Мем, СА 94043<рг> 
США 
</р> 
<р>650-253-0000</р> 
<р><а һге?= "Пір: / /имм .доодТе. сот/ ">боодТе. сот</а></р> 
</агіісТе> 


| а. ПРИМЕЧАНИЕ 


а. За изменениями, которые в этом разделе мы вносим в код страницы, вы можете проследить 
в режиме онлайн. Было: Һр://діуеіпёіоћті5.ого/ехатріеѕ/огдапігайоп.һёті; стало: Һір:// 
аімеіпёоћёті5.ого/ехатріеѕ/огдапітаіоп-ріиѕ-тісгоааќа.ћті. 


Коротко и хорошо. Все сведения об организации содержатся внутри тега <агііс1е>, 
с которого мы и начнем преобразования: 


<агііс1е 1%етзсоре іёепёуре=”һЕЕр: //афа - уосаБи1агу. огод/Огдапіғаёїоп”> 


Как и при разметке данных о человеке, надо добавить атрибуты іёетѕсоре 
и Цетбуре в самый внешний тег, каковым в данном случае является <агііс1е>. 
В атрибуте 1{етбуре надо объявить используемый словарь микроданных (сейчас 
это Һір://даќа-уосаБиагу.ого/Огдапіғайоп). Атрибут 1{етзсоре удостоверяет, что все 
свойства микроданных, определенные в элементах-потомках <агііс1е>, относят- 
ся к тому же словарю. 

Что же представляет собой словарь Огдапігаііоп? Он очень прост и даже прямо- 
линеен. Часть его должна быть уже знакома вам. Внимание на табл. 10.3. 
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Таблица 10.3. Словарь ОгдапхаНоп 


Свойство | Описание 

пате Название организации 

ий Ссылка на сайт организации 

аййгеѕѕ Местонахождение организации (может содержать дочерние свойства ѕігееі-айгеѕѕ, 
осаШу, гедіоп, роѕїаі-соае, соитгу-пате) 

{еї Телефонный номер организации 

део Географические координаты организации (всегда с двумя дочерними свойствами: 
[аКиае и опдкиае) 


Внутри самой внешней обертки <агііс1е> первый элемент нашей разметки — 
<11>. В заголовке <11> содержится название организации, поэтому именно сюда 
следует вписать атрибут 1{етргор="пате": 


<] іёетргор=”пате”>боод1е, Іпс.</ћ1> 


Согласно табл. 10.1, теги <ћ1> обрабатываются стандартным образом и значение 
свойства микроданных, определенного в таком теге, равно текстовому содержимо- 
му тега. По-русски мы сказали бы всего лишь: «Название организации — Сооз|е, 
Тс.». 

Следующим по порядку идет фрагмент адреса (улица и дом). Адреса организа- 
ций размечаются в точности так же, как и адреса людей. Надо сначала добавить 
атрибут іетргор="аййгеѕѕ" в самый внешний элемент, дочерними по отношению 
к которому будут все части адреса (в данном случае таков тег <р>). Этим способом 
мы введем свойство аййгеѕѕ словаря Огдапіғаі1іоп. 

Надо объявить атрибуты іетіуре и іёепѕсоре, которые бы свидетельствовали, 
что у данной единицы, определяемой словарем Адагез$, есть несколько дочерних 
свойств: 


<р їёетргор=”аййгеѕѕ” іёетѕсоре 
ісетіуре=” 1р: //Чафа-хосаБи1агу. огд/АЧаге$$”> 


Наконец, каждый фрагмент сведений, для которого подыскивается соответ- 
ствующее свойство словаря Айӣгеѕ5 (5їгееї -аййгеѕѕ, 1оса1іїу, гедіоп, роѕїа1 -соде, 
соипёгу-пате), надо обернуть тегом <ѕрап> и после этого вписать нужное свойство: 


<р 1бетргор="а@9ге$$" 1ёетѕсоре 
гетуре= "Пір: / /дата -үосариТагу.огод/Адйгеѕ5 "> 
<ѕрап 1%етргор=” $гее{ - а44гез$”>1600 АтрһіЕһеаїге Рагкмау</ѕрап><рг> 
<ѕрап 1%етргор=”1оса11фу”>Моиибали \1ем</зрап>, 
<ѕрап 1$етргор=”гед1оп”>СА</ рап> 
<ѕрап 1фетргор=”ро$фа1 -соде”>94043</ ѕрап><рг> 
<ѕрап 1$етргор=” соипЕгу- пате”>05А</ зрап> 
</р> 


= 


По-русски мы сказали бы: «У организации есть адрес, хранимый как совокуп- 
ность нескольких свойств. Свойство с названием улицы и номером дома равно 1600 
Атрһіїћеаіге РагКмау. Свойство с названием населенного пункта равно Моипба1и \1ем. 
Свойство с названием региона равно СА (это штат Калифорния). Почтовый ин- 
декс — 94043, а страна — США». 
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Теперь о телефонном номере организации. Всем известно, как сложно постро- 
ены телефонные номера. В каждой стране их синтаксис какой-то свой, и при между- 
народных звонках случаются накладки. В данном примере есть телефонный номер 
США в формате, удобном для звонящих из любой части США: 


<р 1{етргор="{е1 ">650-253-0000</р> 


Если вы вдруг не заметили, область видимости словаря Аййгеѕѕ закончилась 
с закрытием соответствующего тега <р>. Теперь мы вновь определяем свойства 
словаря Огдап1 та 1оп. 

Чтобы перечислить несколько телефонных номеров, например один для кли- 
ентов из США, а другой для международных звонков, поступайте следующим 
образом. Поскольку каждое свойство микроданных может быть повторено, до- 
статочно заключить оба телефона в независимые НТМТ-элементы, отделив их 
от текстовых меток: 
<р> 

Для клиентов из США: <ѕрап іеетргор="+е1">650-253-0000</ ѕрап><рг> 
Для клиентов из Англии: <ѕрап 1%етргор="{е] ">00 + 1% + 65025 30000</ѕрап> 
</р> 


Согласно табл. 10.1, теги <р> и <ѕрап> обрабатываются стандартным образом. Зна- 
чение свойства микроданных е1, определенного в таком элементе, — это просто 
текстовое содержимое. Словарь микроданных Огдапіғаїіоп не предусматривает де- 
ления телефонного номера на части; значение свойства е1 — текст в свободной фор- 
ме. Если хотите указать в скобках код страны или области, а группы цифр разделить 
не дефисами, а пробелами, это можно сделать. Как будет читать телефонные номера 
клиентская программа — обработчик микроданных, решать самой программе. 

Следующее свойство, иг1, опять знакомо нам. Как описано в предыдущем раз- 
деле, можно связывать О ВТ.-адрес с человеком (Регѕоп), но можно, естественно, 
и с организацией. Как ОКІ -ресурс может выступать главная страница сайта фир- 
мы, страница контактов, страница одного из продуктов и т. п. Ссылку на сетевой 
ресурс компании (или о компании) снабжают атрибутом іёетргор="иг1": 


<р><а 14$етргор=”иг]” һгеғ= "Пір: / Лам. доодТе. сот/ ">боодТе. сот</а></р> 


Согласно табл. 10.1, теги <а> обрабатываются особым образом; значение свой- 
ства микроданных приравнивается к значению атрибута һге?, а не к вложенному 
текстовому содержимому. По-русски: «Эта организация как-то связана с ОВТ- 
адресом Һ&р://ммм.доодіе.сот/». Ничего более конкретного о характере связи ска- 
зать нельзя; текст ссылки — Соодіе.сот — игнорируется. 

Осталось сказать о геолокации, но нео \/ЗС АРІ геолокации (о котором см. 
главу 6), а о том, как отразить в разметке микроданных физическое местонахожде- 
ние организации. 

Вплоть до настоящего момента все наши примеры вращались вокруг дополни- 
тельной разметки данных, видимых на экране. Так, например, если есть <ћ1> с тек- 
стом — названием фирмы, мы добавим в тег <11> атрибут Цетргор, чтобы тем самым 
объявить: видимый на экране текст (заголовок) представляет собой название фир- 
мы. Другой пример: если тег <іто> ссылается на фотографию, мы тоже добавим 
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в этот тег атрибут 1{етргор, который будет свидетельствовать: видимая на экране 
картинка представляет собой фотографию человека. 

Не таковы геолокационные сведения. Широта и долгота местонахождения офи- 
са организации (с точностью до четырех десятичных знаков!) на экране отсутству- 
ют. Да и наша страница-образец до оснащения разметкой микроданных вовсе не 
содержала геолокационных сведений. На странице есть ссылка на Карты Соодіе, но 
в ОВГ-адрес этой ссылки не входят координаты — широта и долгота (вернее, вхо- 
дят, но в формате, специфичном для Сооёе). Если бы даже на нашей странице 
стояла ссылка на гипотетический веб-сервис с картами, который бы принимал 
широту и долготу как параметры ОКІ-адреса динамически генерируемой страни- 
цы, нельзя было бы выделить нужные фрагменты адреса и разметить их микро- 
данными. Невозможно объявить, что первый параметр ОВТ--запроса представляет 
широту, второй — долготу, а все остальные параметры несущественны. 

Для сложных случаев, таких как этот, в НТМІ5 предусмотрен механизм анно- 
тирования невидимых данных. Пользоваться им следует лишь при отсутствии аль- 
тернатив. Если важные для вас данные можно хоть как-то вывести на экран, это 
обязательно надо сделать. Невидимым машиночитаемым данным свойственно 
очень быстро «портиться». Это связано с тем, что, обновляя видимый текст на стра- 
ницах, очень часто забывают обновить машиночитаемые данные, причем чаще, чем 
вам кажется (если вам пока не приходилось проявлять подобную забывчивость, 
то, думаю, еще придется). 

Так или иначе в некоторых случаях нельзя обойтись без невидимых данных. 
Пусть, например, ваш начальник хочет, чтобы на сайте были машиночитаемые све- 
дения о координатах офиса, но чтобы при этом пользовательский интерфейс не за- 
громождала пара непонятных шестизначных чисел. В такой ситуации невидимые 
данные — единственная альтернатива. Можно лишь немного себя обезопасить, если 
поместить машиночитаемые сведения сразу после видимого текста, который они 
описывают. Тогда, возможно, при обновлении данных на странице администратор 
сайта не забудет внести правку не только в текст, отображаемый на экране, но и вдан- 
ные, следующие за ним в коде страницы. В нашем примере можно создать внутри 
того же тега <агіісТе>, который содержит остальные свойства организации, тег <зрап> 
и внести в него невидимые геолокационные сведения: 

<ѕрап 1$етргор=”део” 1%етзсоре 
іепёуре=”һїіЄр: //Чафа-уосари1Тагу.ога/бео”> 
<тефа іёетргор="Лаїіїиде" сопїепі=" 37.4149" /> 
<тефа іёетргор="1опоіїиде" сопїепі=" -122.078" /> 
</зрап> 
</агїісТе> 


Для геолокации существует свой собственный словарь микроданных, как, на- 
пример, для адреса человека или организации. Вот почему в этом теге <зрап> долж- 
ны присутствовать следующие три атрибута: 

О Цетргор="део" — показывает, что в данном элементе определено свойство орга- 
низации део; 


О Петуре="И р: //дафа-хуосаБИТагу .огд/бео" — объявляет словарь микроданных, 
которому соответствуют свойства внутри самого этого элемента; 
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О 1їетѕсоре — удостоверяет, что этот элемент соответствует единице микроданных 
со словарем, объявленным в атрибуте 1{етбуре. Все свойства, находящиеся вну- 
три, принадлежат словарю микроданных бео (Ир://да{а-уосаБ\агу.огд/Сео), а не 
Огдапіғаїіоп (ИЕр://Ча{а-уосаб\агу.ога/Огдаттай оп). 


В нашем примере решена и еще одна проблема, а именно: «Как аннотировать 
невидимые данные?» Это делается с помощью тега <тефа>. В предыдущих версиях 
НТМЕ разрешалось использовать тег <тефа> только в начальном разделе страни- 
цы — <ћеаф> (см. раздел «Элемент НЕАР» главы 3). А вотв НТМТ.5 тег <пеїа> мож- 
но помещать куда угодно. Так мы и поступаем: 


<тефа 1{етргор="Та{ 1$ иде" сопїепі=" 37.4149" /> 


Согласно табл. 10.1, тег <теа> обрабатывается специальным образом: значение 
свойства микроданных приравнивается к значению атрибута сопёепї. Поскольку 
этот атрибут никогда не отображается внешним образом, мы приобретаем власть 
над неограниченно большим объемом невидимых данных. Но большая власть — это 
и большая ответственность. На нашей совести будет синхронизация невидимых 
данных с видимым текстом вокруг них. 

В системе Сооёе Вісһ Ѕпірреїѕ нет непосредственной поддержки словаря 
Огдап1 та 1оп, поэтому красивой поисковой выдачи я здесь не покажу. Но с пред- 
ставлением организаций тесно связаны следующие два типа разметки микродан- 
ных, которые, в свою очередь, поддерживаются Соозе Вісһћ Ѕпірреќѕ. 


Разметка данных о событии 


Событиям свойственно происходить. Некоторым событиям свойственно проис- 
ходить в заранее назначенное время. Разве не хорошо было бы, если бы поисковые 
системы могли узнавать о предстоящих событиях непосредственно от создателей 
веб-страниц? А между тем микроданные предоставляют такую возможность. 

Рассмотрим фрагмент графика моих выступлений на конференциях (НЁр:// 
аіуеіпіоћті5.огд/ехатріеѕ/емепё.Һті): 


<агїіс1е> 
<п1>День разработчика боод]е (2009) </һ1> 
<іто міаєћ="300" һеідћ="200" 
ѕпс="ПЕЕр: //аїуеіпёоћіті5 .ого/ехатр1еѕ/904-2009-ргадие-ріТогіт. јра" 
а1е=" [Марк Пилгрим на трибуне]"> 
<р> 
День разработчика Сбооо1е (боооТе ОеуеТорег рау) — это шанс узнать 
о продуктах 6009]е для разработчиков прямо из первых рук, от инженеров, 
создавших эти продукты. На однодневной конференции запланированы 
семинары и "офисные часы", посвященные таким веб-технологиям, как боод1е 
Марѕ, ОрепЅосіа1, Апагота, АЈАХ АРІ, Сһготе и боод1е Мер Тоо1К1Ф. 
</р> 
<р> 
<ііте датеїіте="2009-11-06708:30+01:00">6 ноября 2009 г., 8:30</{1те> 
&пааѕћ; 
<ііте датеїіте="2009-11-06720:30+01:00">20:30</1іте> 
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</р> 
<р> 
Конгресс-центр<бг> 
5Ећ Куббпа 65<рг> 
14021 Прага 4<рг> 
Чехия 
</р> 
<р> 
<а һге?="ПЕЕр: //соде.чоодТе. сот/іп1 /сѕ /емепЕѕ/аеуе1орегаау/2009/һоте. п "> 
Главная страница 600 в Праге</а></р> 


</агїіс1е> 
# + 
м ПРИМЕЧАНИЕ 
а> За изменениями, которые в этом разделе мы вносим в код страницы, вы можете просле- 
«а. 


5. дить в режиме онлайн. Было: ћір://аіуеіпіоћіті5.огод/ехатріеѕ/еуепі.ћ№ті; стало: ВЕр:// 
`` амеіпёоћеті5.ого/ехатріеѕ/еуепі-ріиѕ-тісгодаќа.Һті. 


Вся информация о событии содержится в теге <агііс1е>, куда мы и поместим 
атрибуты 1{етеуре и 1%етвсоре: 
<агїіс1е 1%етзсоре 1$етёуре=”И® фр: //дафа-уосаБиТагу.огд/Емепф”> 


Пространство имен словаря Е\уеп{ задано ОВГ-адресом ИЁр://Чака-муосабщагу.огд/ 
Еуепї. По названному адресу доступна симпатичная таблица с описанием свойств 
словаря. Перечислю эти свойства и здесь (табл. 10.4). 


Таблица 10.4. Словарь Емепї 


Свойство Описание 


ѕиттагу Название события 
ий Ссылка на страницу подробной информации о событии 
Іосайоп Место, где проходит событие, и место сбора участников. Если необходимо, 


может быть представлено вложенной единицей словаря Огдапігайоп (см. раз- 
дел «Разметка данных об организации» данной главы) или Аййгеѕѕ (см. раз- 
дел «Разметка данных о человеке» этой главы) 


аеѕсгіріоп Описание события 


Ѕїаќраќе Дата и время начала события (в 150-формате) 

епараїе Дата и время окончания события (в 150-формате) 

ачгаНоп Продолжительность события (в 150-формате для продолжительности) 

емепіТуре Категория события (например, «Концерт» или «Лекция»). Предполагается текст 
в свободной форме, а не атрибут из закрытого списка 

део Географические координаты места события (всегда с двумя дочерними свойства- 
ми: [а Киае и Іопаќиае) 

рһоѓо Ссылка на изображение, в частности фотографию, связанную с событием 


Название события заключено в нашем примере в тег <ћ1>. Согласно табл. 10.1, 
теги <һ1> обрабатываются стандартным образом и значение свойства микроданных, 
определенного в таком элементе, равно текстовому содержимому элемента. Значит, 
достаточно добавить атрибут іёетргор, который будет показывать, что данный тег 
<һ1> содержит название события: 


<] іёетргор=” зиттагу”>День разработчика боод1е (2009) </һ1> 
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По-русски: «Название этого события — День разработчика Соозе (2009)». 

На странице данных о событии есть фотография, которую можно разметить свой- 
ством рћоїо. Как и следовало ожидать, фотография заключена в тег <іпо>. Как и свой- 
ство рһоїо словаря Регѕоп (см. раздел «Структура микроданных» этой главы), свой- 
ство рИофо словаря Ехепё имеет своим значением ОВІ -адрес. Поскольку из табл. 10.1 
известно, что значение свойства микроданных, определенного в теге <іпо>, прирав- 
нивается к значению атрибута ѕгс, нам достаточно вписать в <іто> атрибут 1{етргор: 


<іто ТФетргор=”риофо” итаи="300" һеїоһі=" 200" 
$гс=" Ир: //аіуеіпёоћїті5 .ого/ехатр1еѕ/904-2009-ргадие-ріТогіт. јро" 
а1 ="[Марк Пилгрим на трибуне]"> 


По-русски: «С этим событием связана фотография Һір://аімеіпёоћёті5.ого/ 
ехатріеѕ/944-2009-ргадие-ріІагіт.јро». 

Затем следует подробное описание нашего события — абзац текста в свободной 
форме: 
<р іёетргор=”еѕсгіріїоп”> 

День разработчика СбоооТе (боод]е ВеуеТорег Вау) — это шанс узнать 

о продуктах боод1е для разработчиков прямо из первых рук, от инженеров, 

создавших эти продукты. На однодневной конференции запланированы 

семинары и "офисные часы", посвященные таким веб-технологиям, как боод1е 

Марѕ, ОрепЅосїа1, Апаго1а, АЈАХ АРІ, Сһготе и боод1е Мер Тоо1кії.</р> 


А теперь нечто новое. Событиям свойственно происходить в определенные 
числа, начинаться и заканчиваться в определенное время. В НТМІ5, как известно, 
для обозначения даты и времени существует тег <ііпе> (см. раздел «Дата и время» 
главы З), чем мы и воспользовались. Возникает такой вопрос: как разметить теги 
<ііте> микроданными? 

Заглянув в табл. 10.1, мы увидим, что тег <їіте> обрабатывается особым образом. 
Значение свойства микроданных, определенного в теге <їіпе>, равно значению атри- 
бута даїеїіте. Между тем свойства ѕёагїраїе и епіраїе словаря Ехепё требуют того же 
150-формата дат, что и свойство Паѓеїіпе тега <їіте>. В этом примере семантика 
основного словаря НТМ\. и семантика нашего (пользовательского) словаря микро- 
данных отлично дополняют друг друга. Итак, чтобы обозначить с помощью микро- 
данных начало и конец события, надо, во-первых, правильно использовать возмож- 
ности НТМІ (для оформления даты и времени применять тег <ііпе>), а во-вторых, 
добавить внутрь <їіпе> атрибут іёетргор: 
<р> 

<ііпе іёетргор=” ѕёагра+е” даїеїіте="2009-11-06708:30+01:00">6 ноября 2009 г. , 
8:30</іте> 
&пдазй; 
<ііте 1$етргор=”епаВафе” дафе{1те="2009-11-06Т20:30+01:00">20 : 30</{1те> 
</р> 


По-русски: «Это событие начинается 6 ноября 2009 года в 8:30 утра и длится до 
20:30 того же дня (время пражское, СМТ+1)». 

Теперь о свойстве 1осаїіоп. Словарь Еүепё предусматривает, что это свойство 
может быть выражено самостоятельной единицей словаря Огдап1 га 1оп или Адагез$. 
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В нашем случае событие имеет место в пражском Конгресс-центре, который спе- 
циализируется на проведении конференций различного рода. Если воспользовать- 
ся разметкой организации, то мы сможем указать как название, так и адрес. 

Сначала объявим, что тег <р> с адресом — это свойство события Тоса&1оп и что 
этот тег также является самостоятельной единицей микроданных, принадлежащей 
словарю Һр://аїа-уосабиіагу.ога/Огдапіхайоп: 


<р Т{етргор=”1] оса 1оп” 1фетзсоре 
1Сетфуре=” Вр: //Чафа-мосаБи]агу. огд/Огдап1 та 1оп”> 


Затем обернем название организации в тег <ѕрап> и «навесим» на него атрибут 
іёетргор: 


<ѕрап ісетргор=” пате”>Конгресс-центр</ѕрап><рг> 


Свойство "пате" находится в словаре Огдапіғхаїіоп, а не в Еуеп®. С тега <р> начина- 
ется область видимости словаря Огдапігаіоп, азакрывающего тега </р> еще не было. 
Все объявляемые здесь свойства микроданных принадлежат словарю, область ви- 
димости которого была объявлена последней по счету и еще длится. Вложенные 
словари можно представить себе в виде стека. До тех пор, пока самый верхний эле- 
мент стека не удален, следуют свойства, принадлежащие словарю Огдапіғаїіоп. 

В сущности, мы сейчас добавим в стек еще и третий словарь: адрес (Айїгеѕѕ) 
организации (Огдапігаїіоп), принимающей событие (Ечепё): 


<ѕрап ісетргор=”аййгеѕ5” 1%етзсоре 
ісетіуре=” һр: //ааа -уосаби1агу.ого/Аййгеѕ5”> 


Мы снова хотим занести отдельные части адреса в самостоятельные свойства 
микроданных, а значит, понадобится несколько тегов <ѕрап>, в которых мы опреде- 
лим соответствующие атрибуты іїетргор (если вы не успеваете за ходом изложения, 
то вернитесь к разделам «Разметка данных о человеке» и «Разметка данных об 
организации» этой главы, где можно прочитать об аннотировании адресов людей 
и организаций микроданными). 


<ѕрап 1фетргор=” ${гееф - айагеѕ5”>51һ Күёїпа 65</ѕрап><рг> 
<ѕрап ісетргор=”роѕ+а1 -соде”>140 21</зрап> 

<ѕрап 1фетргор=”1оса11{у”>Прага 4</ѕрап><рг> 

<ѕрап 1ф$етргор=” соипігу- пате” >Чехия</ѕ$рап> 


У адреса других свойств не предусмотрено. Мы закроем тег <ѕрап> (область ви- 
димости словаря Аййгеѕѕ), тем самым убирая из стека верхний элемент: 


</ѕрап> 


У организации других свойств тоже не предусмотрено, что позволяет нам за- 
крыть тег <р> (область видимости словаря Огдапіғаїіоп) и тем самым убрать из 
стека еще один элемент: 


</р> 


Теперь мы возвращаемся к разметке свойств события (Ечепі). Следующее свой- 
ство, део, представляет физический адрес события. В нем используется словарь бео, 
которым мы уже пользовались для оформления физического адреса организации 
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(в предыдущем разделе). Опять нужен <ѕрап> в качестве контейнера, который будет 
содержать атрибуты 1фещуре и (етзсоре. Внутри <ѕрап> будут присутствовать два тега 
<тефа>, один с широтой (свойство 1аїіїиде) и один с долготой (свойство 10опоіїиае): 


<ѕрап 1фетргор=”део” іёетѕсоре 1фетфуре=” Пр: //Чафа-хосаби1агу. огд/@ео”> 
<пеёа 1$етргор=”Та1ф$и4е” сопбет="50.047893" /> 
<тефа 1фетргор=”1опд1 иде” сопбет="14.4491" /> 

</зрап> 


После того как мы закроем <ѕрап> со свойствами из словаря бео, мы возвраща- 
емся к свойствам из словаря Еуеп®. Последнее оставшееся свойство уже знакомо 
нам: это иг1. Связать О ВТ--адрес с событием можно точно таким же образом, как 
с человеком (см. раздел «Разметка данных о человеке» этой главы) и с организа- 
цией (см. раздел «Разметка данных об организации» этой главы). При корректном 
использовании НТМГ, то есть если гиперссылка имеет вид <а һге?>, достаточно 
добавить к ссылке атрибут іёетргор="иг1": 
<р> 

<а 1фетргор=”иг1” 
пге?=" Пір : //соде .доодТе .сот/1ие1/с$/еуете$/4еуе]орегдау/2009/Поте . Пет "> 
Главная страница 600 в Праге 
</а> 
</р> 
</агїісТе> 


На странице, взятой нами за образец (Һр://дїуеіпіоћіёті5.ого/ехатріеѕ/еуепё. ті), 
присутствует и второе событие: мое выступление на конференции СопЕоо в Мон- 
реале. Ради экономии места я не буду подробно рассматривать ее разметку, которая 
по существу ничем не отличается от разметки данных о конференции В Праге: со- 
бытие (единица словаря Еуеп®) с вложенными сведениями о геолокации (единица 
словаря бео) и адресе (Аййгеѕѕ). Говорю об этом лишь затем, чтобы повторить: на 
одной странице может быть отражено несколько событий, каждое — в собственной 
разметке микроданных. 

И снова Соое Кісһ Ѕпірреѓѕ. Тестовый инструмент Соое Кісһћ Ѕпірреёѕ 
утверждает, что из нашей страницы события (Һір://аімеіпіоћіёті5.огд/ехатріеѕ/ехепїі- 
ріиѕ-тісгодаќа.Һті) поисковые роботы Соов/е сумели извлечь следующую инфор- 
мацию: 


Тет 

Туре: Пір: //аата-уосари1агу.ого/Ечепі 

ѕиттагу = День разработчика боод]е (2009) 

еүепЕТуре = конференция 

рћоїо = Пр: //аіуеіпіоћіті 5. ого/ехатр1еѕ/9а4-2009-ргадие-рі1огіт. јро 

аеѕсгірііоп = День разработчика боод1е (боод1е Веуе1орег Вау) - это шанс 
узнать о продуктах боод]е для разработчиков прямо из первых 
рук, от инженеров, создавших эти продукты. На однодневной 
конференции запланированы семинары и "офисные часы", 
посвященные таким веб-технологиям... 

ѕіагїраёе = 2009-11-06708:30+01:00 

епараїе = 2009-11-06720:30+01:00 
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Тосаїіоп = Цет(_1) 
део = Пет _3З) 
игі = Ир: //соае .доодТе. сот/іпі1/сѕ/еуепіѕ/аеуе1орегадау/2009/һоте . Піт] 
Тет 
19: 1 
Туре: Пір: //дафа-уосабиТагу.ога/Огдап1 та 1 оп 
пате = Конгресс-центр 
айдгеѕѕ = Іет(_ 2) 
Тет 
14: 2 
Туре: Пір: //аӢата-уосариТагу.ого/Адйгеѕ5 
Ѕігееі-аййгеѕ5 = 5Ећ КуёЕпа 65 
роѕїа1-сойе = 14021 
Тоса1іїу = Прага 4 
соипїгу-пате = Чехия 
Тет 
14: 3 
Туре: Пір: //аӢата-уосариТагу.огод/бео 
Таїіїиае = 50.047893 
Топодііџде = 14.4491 


Как видите, здесь вся разметка налицо. Свойствам, выступающим как само- 
стоятельные единицы микроданных, присвоены внутренние идентификаторы 
(ТЕет(__1), Пет 2) ит. д.), что не входит в состав спецификации микроданных. 
Тестовые инструменты Соозе пользуются этой условной формой вывода для 
отображения нелинейных структур: так более наглядно видна группировка вло- 
женных единиц и их свойств. 

Как же в выдаче Соове может быть отображена наша страница-образец? Не за- 
бывайте, что это только пример: Соое может в любой момент изменить формат 
выдачи результатов поиска, а может вообще не обратить внимания на вашу раз- 
метку микроданных. Приблизительный вид выдачи показан на рис. 10.2. 


Маг Рйдит?’$ емепі саіепааг 

Ехсегрї гот ће раде мм! ѕһом ир һеге. 

Ехсегрї гот ће раде мм! ѕһом ир һеге. 

Соодіе Оехеіорег Оау 2009 Еі, Моу 6 Сопагеѕѕ Сещег, Ргаһа 4, СхесН Керч с 

СопРоо.са 2010 Уеа, Маг 10 Ніќоп Мопігеа! Вопауепиге, Мопігёаі, ОчёБес, Сапада 
аіуеіпіоћті5 .огд/ехатріеѕ/ехепі-ріиѕ-тісгодаѓа.һіті - Сасһеа - Зипйаг радеѕ 


Рис. 10.2. Образец поисковой выдачи, содержащей страницу, 
на которой информация о событии размечена микроданными 


После названия страницы и выдержки из ее текста, которая выбирается авто- 
матически, Соор[е на основе нашей разметки микроданных отображает небольшую 
таблицу с событиями. Дата имеет вид: Еті, №оу 6. Где-либо в нашей НТМІ-разметке 
и в микроданных ничего подобного нет. Мы использовали две полных строки 
в формате 1850: 2009-11-06708:30+01:00 и 2009-11-06720:30+01:00. Сооғв1е, сравнив 
две наши даты, заметил, что это один и тот же день, и вывел результат в виде единой 
даты, более удобной для пользовательского восприятия. 
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Теперь посмотрим на адреса событий. Соое отображает адрес в формате: на- 
звание учреждения + населенный пункт + страна (номер дома и название улицы 
игнорируются). Это возможно постольку, поскольку мы разбили адрес на пять само- 
стоятельных свойств микроданных: пате, ${гееф-аЧ4гезз, гедіоп, Тоса1іїу и соипігу- 
папе. Соое выводит не все пять, а только часть — сокращенный адрес. Другие си- 
стемы, принимающие на вход тот же НТМГ-код с разметкой микроданных, могут 
выбрать для отображения другие свойства или иначе показывать их на экране; 
о «правильном» и «ошибочном» выборе здесь речи не идет. Веб-мастер должен 
предоставить как можно больше данных максимально возможной точности, а кто 
и как этими данными будет оперировать — целиком на их совести. 


Разметка клиентских отзывов 


Поговорим еще об одном способе улучшить веб-страницы (и, возможно, поисковую 
выдачу) с помощью микроданных. Речь пойдет об отзывах о товарах и услугах. 

Вот краткий отзыв о моей любимой пиццерии, расположенной в том же районе, 
где я живу. Этот ресторан существует на самом деле. Если вам случится бывать 
в Апексе, штат Северная Каролина, — заходите, не пожалеете. Первоначально от- 
зыв был сверстан так (Һр://аімеіпіоћіті5.ого/ехатріеѕ/геуіему.ҺЕті): 


<агїіс1е> 
<П1>Аппа'ѕ Ріллегіа</һ1> 
<р>%ж ж ж жх (4 звезды из 5 возможных) </р> 
<р>В историческом центре Апекса - пиццерия с нью-йоркской атмосферой</р> 
<р> 
Еда первоклассная. По духу заведение вполне отвечает формату "ближайшей 


к дому пиццерии". Ресторанный зал несколько тесноват, отчего полным 
людям трудно пробираться между столами к своим местам. Раньше бесплатно 
давали зубчики чеснока, а теперь только хлеб: за вкусное надо платить. 
В целом - отличное место. 

</р> 

<р> 


100 №ғЕһ Ѕа1ет ЅЕгееї<бг> 
Арех, № 27502<рг> 
ЏЅА 
</р> 
<р>- отзыв оставил Марк Пилгрим, последнее обновление 31 марта 2010 г.</р> 
</агііс1е> 


= 5 ПРИМЕЧАНИЕ 


| а За изменениями, которые в этом разделе мы вносим в код страницы, вы можете просле- 
< 4. дить в режиме онлайн. Было: Ир://Чметюнит5.огд/ехатр!е$/гемеми.Н&т!; стало: Һр:// 
аіуеіпоћёті5.огд/ехатріеѕ/геміем-ріиѕ-тісгоааќа.ћҺті. 


Поскольку отзыв обернут тегом <агііс1е>, именно в этом теге мы объявим атри- 
буты іепёуре и 1{етзсоре. Задающий пространство имен О ВТ-адрес словаря вы- 
глядит так: 


<агііс1е 1%етзсоре іёепёуре="ҺЕЄр: //даёа- мосаБи1агу. огд/Кеуіем"> 
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Какие свойства доступны в словаре микроданных Ке\1ем? Внимание на табл. 10.5. 


Таблица 10.5. Словарь Веме\м 


Свойство Описание 

Кетгемемеа Название услуги, товара, предприятия и т. п., которому посвящен отзыв 

гайпа Численная оценка качества по шкале от 1 до 5; для использования нестандарт- 
ной шкалы нужен словарь Вайпд (НЕр://Чаа-уосаБ\агу.огд/КаИпа) 

гемемег Имя человека, который оставил отзыв 

@Ч{тгемеме4 Дата (в 150-формате), когда был оставлен отзыв 

ѕиттагу Краткое содержание отзыва 

аеѕсгіріоп Основное содержание отзыва 


Первое свойство легко сразу же применить: іёепгеуіемей — обычный текст, ко- 
торый в нашем примере находится в заголовке <ћ1>. Здесь мы должны объявить 
атрибут 1{етргор с соответствующим значением: 


<й1 1%етргор=" 1$ етгеу1емед">Аппа'$ Р177ег1а</й1> 


К вопросу о рейтинге я еще вернусь; пока оставим его без рассмотрения. 
Следующие два свойства просты: зиттагу кратко описывает товар или услугу 
с точки зрения лица, оставившего отзыв, а дезсг1р1оп — основной текст отзыва: 


<р іёетргор=" зиттагу">В историческом центре Апекса - пиццерия с нью-йоркской атмос- 
ферой</р> 
<р їёетргор=”йеѕсгіріїоп”> 

Еда первоклассная. По духу заведение вполне отвечает формату "ближайшей 

к дому пиццерии". Ресторанный зал несколько тесноват, отчего полным 

людям трудно пробираться между столами к своим местам. Раньше бесплатно 

давали зубчики чеснока, а теперь только хлеб: за вкусное надо платить. 

В целом - отличное место.</р> 


Со свойствами 1осаїіоп и део нам, в сущности, уже приходилось сталкиваться 
(чтобы удостовериться в этом, просмотрите предыдущие разделы, где показано, 
как размечать микроданными адрес человека, адрес организации и геолокацион- 
ную информацию): 


<р Т{етргор=”1] оса 1оп” 1фетзсоре 
ТСетфуре=” Ир: //Чафа-хосаБи1агу. огд/АЧаге$$”> 
<ѕрап 1$етргор=” $ гее{ - а44ге$$”>100 М№огЕһ ЅаТет Ѕгееї</ѕрап><рг> 
<ѕрап 1%етргор=”1оса11фу”>Арех</зрап>, 
<ѕрап 1%етргор=”гедтоп”>№С</ рап> 
<ѕрап 1фетргор=”розфа1 -соде”>27502</ зрап><6г> 
<ѕрап 1%етргор=”соип®гу-пате”>15А</ зрап> 
</р> 
<ѕрап 1$етргор=”део” 1%етзсоре 
ТСетфуре=”ВЕЁр: //даТа- уосаби1агу. огд/бео”> 
<пеа іёетргор=”1аїіёиӣе” сопіепі=" 35.7 30796" /> 
<пеа ісетргор=”1опоіёиае” сопет="-78.851426" /> 
</зрап> 


В последней строке наблюдается уже знакомая проблема: два самостоятельных 
фрагмента информации в одном элементе. Человека, который оставил отзыв, зовут 
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Марк Пилгрим, а дата, когда был оставлен отзыв, — 31 марта 2010 года. Как <раз- 
делить» два свойства микроданных? Как обычно, следует воспользоваться неза- 
висимыми обертками (см. раздел «Разметка данных о человеке» этой главы), 
в каждой из которых объявить атрибут 1{етргор. В сущности, дату в этом образце 
следовало бы оформить тегом < 1те>, что и дало бы естественную обертку, на ко- 
торую удобно «навесить» атрибут 1{етргор. Тогда достаточно вложить имя лица, 
оставившего отзыв, в тег <ѕрап>: 
<р> 
<ѕрап іёетргор="геуіемег">Марк Пилгрим</ѕрап>, последнее обновление - 
<ііте 1$етргор=” ЧЕ геу1емед” датеїіте=” 2010-03 -31”> 
31 марта 2010 г. 
</ііте> 
</р> 
</агїісТе> 


Теперь поговорим о рейтингах. В клиентском отзыве о товаре или услуге труд- 
нее всего правильно разметить рейтинг. По умолчанию словарь Кеу1ем предпола- 
гает выставление рейтинга по шкале от 1 до 5, на которой 1 — это ужасно, а 5 — пре- 
красно. Вы можете, если хотите, пользоваться и другой шкалой, но прежде, чем 
перейти к таковой, рассмотрим стандартную рейтинговую шкалу: 


<р>ж жж же (<5рап 1{етргор=”га{1п9”>4</5рап> звезды из 5 возможных)</р> 


Если вы применяете эту шкалу, то свойству микроданных іїетргор="гаііпо" надо 
присвоить числовое значение рейтинга (в данном случае 4) — и все. А если бы вы 
работали с другой шкалой? Тогда следует дополнительно объявить границы диа- 
пазона оценок. Так, при переходе к шкале 0... 10 разметка свойства іёетргор=" гаїіпо" 
останется прежней, но значение рейтинга будет теперь устанавливаться не напря- 
мую, а через вложенный словарь микроданных Каїіпо (ћр://ааѓа-уосабиагу.ого/ 
Вайпд), который требует вдобавок объявлять худшее и лучшее значения на исполь- 
зуемой шкале: 


<р 1фетргор=”га{1п9” іёетѕсоре 
ісетіуре=” һр: //ааа - уосаби1 агу. огд/Каїіпо”> 
ЖКЖ ЖЖЖ Ж 
(<ѕрап ісетргор=”ма1ие”>9</ѕрап> по шкале от 
<ѕрап 1%етргор=”мог$т”>0</зрапй> до 
<ѕрап 1$етргор=”Ье${”>10</зрап>) 

</р> 


По-русски это значит: «Оцениваемому продукту я склонен присвоить рейтинг 
9 по 10-балльной шкале». 

Говорилось ли уже, что разметка микроданных над клиентскими отзывами по- 
зволяет влиять на поисковую выдачу? Если нет, то разговором об этом мы и за- 
вершим главу. 

Вот «сырые» данные, которые были извлечены инструментами Сооёе Вісһ 
Ѕпірреїѕ из моего отзыва, оснащенного разметкой микроданных (Һр://ммм.доодіе. 
сот/\умебтаѕіегѕ/ёооі5/гісһѕпірреїѕ?игі=//іуеіпіоһёті5.огд/ехатріеѕ/геміем-ріиѕ-тісгодаїа. 
Һет): 
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сет 


Туре: Пір: //аӢата-уосариТагу.ого/Кеуіем 

1сетгеуіемеа = Аппа 'ѕ Ріхлегіа 

гаііпд = 4 

зиттагу = В историческом центре Апекса - пиццерия с нью-йоркской атмосферой 
аеѕсгірііоп = Еда первоклассна. По духу заведение вполне отвечает... 

айдгеѕѕ = Пет(__1) 

део = Пет 2) 

геуіеме” = Марк Пилгрим 

асгеуіемеа = 2010-03-31 


Пет 


1: 1 

Туре: Пір: //дафа-уосабиТагу .ога/Огдап1 та 1 оп 
Ѕігееї-аайгеѕѕ = 100 №гЕһ ЅаТет 5${гееф 
Тоса1іу = Арех 

гедіоп = № 

роѕїа1-сойе = 27502 

соипігу-пате = ЏЅА 


сет 


14: _2 

Туре: Ир: //Чафа-уосаБиТагу. огд/бео 
Таїіиде = 35.730796 

Топоіїиде = -78.851426 


Образец поисковой выдачи, содержащей мой отзыв, будет выглядеть (если де- 


лать поправку на странности системы Сооз[е, фазы Луны и т. п.) так, как показано 
на рис. 10.3. 


Аппа’з Ріг2егіа: геем 


эожжзсх Кеміем Бу Мак Рйдит - Маг 31, 2010 

Ехсегрї тот ће раде мм! ѕһом ир һеге. 

Ехсегрї от ће раде мі! ѕһом ир һеге. 

аімеіпіоћіті5 .огад/ехатріеѕ/геміем-ріиѕ-тісгодаќѓа.ћті - Сасһеа - Ѕітіаг радеѕ 


Дл 


О 
Ө! 
о 


Рис. 10.3. Образец поисковой выдачи, содержащей страницу, 
на которой клиентский отзыв размечен микроданными 
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микроданных: 
Глуе пусгодаба р1ауэтоипа (ћіёр://#ооіір.ого/тісгодаќајѕ/1їме/); 
спецификация микроданных НТМТ.5 (Һ№р://ЬієЛу/скіВЈ). 
О системе Соое Вісһ Ѕпірреїѕ: 
«О структурированных данных и обогащении поисковой выдачи» (ҺіЁр://\му. 
доодіе.сот/ѕиррої/лмебртаѕіегѕ/біп/апѕуег.ру?ћ=еп&апѕуег=99170); 


«Люди» (Һр://мулу.доодіе.сот/ѕиррог/\мебртаѕіегѕ/біп/апѕмегру?ћ=еп&апѕимег= 
146646); 
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О «Компании и организации» (Һр://ммм.доодіе.сот/ѕиррогі/мертаѕіегѕ/біп/апѕуег. 
ру?Н=еп8апзмег=1 46861); 

О «События» (Һр://ммм.доодіе.сот/ѕирроі/мертаѕіегѕ/біп/апѕмег.ру?ћ=еп&апѕуег= 
164506); 

О «Отзывы» (Һр://мму.доодіе.сот/ѕирроі/мертаѕіегѕ/біп/апѕумегру?Һ=еп&апѕумег= 
146645); 

О «Рейтинги в отзывах» (Һр://мум.доодіе.сот/ѕирроі/мертаѕіегѕ/біп/апѕиег.ру?ћ= 
епёапѕуег=1 72705); 

О инструментарий для тестирования Сооз[е Вісһ Ѕпірресѕ (Һр://Ламм.доодіе.сот/ 
мертаѕіегѕ/&ооІѕ/гісһѕпірреёѕ); 

О «Советы и хитрости Соое ВісЬ Ѕпірреѕ» (Һр://КкпоІ.доодіе.сот/к/доодіе-гісһ- 
ѕпірреѓѕ-іірѕ-апа-їгіскѕ). 


Приложение. 
Универсальный 
почти алфавитный 
определитель 


всего на 


свете 


Не понимаете, как этим пользоваться? Обратитесь к главе 2, где изложены началь- 
ные сведения о тестировании НТМТ.5-функциональности. Определять все те же 
функции позволяет библиотека Мойегпіхг (Һр://Ллм\.тоаегпігг.сот). 


Элементы 


О <аид1о> (ВЕр://ЬЖАу/с2х17К): 


гефиги ! !аоситепї. сгеаёеЕТетепі( ‘ 


аџӣїо’).сапРТауТуре; 


О <аџіо> в формате МРЗ (Һ&р://ги.мікіреаіа.ого/мікі/МРЗ): 


уаг а = аоситей® . сгеасеЕТетепЕ( 'аџаіо' ); 


геёигп !!(а.сапРТауТуре &8& а.сапРТауТуре( 'аџаїо/тред; ').герТасе(/по/, '')); 


О <аиа10> в формате УогЫ$ (Һр://ги.лікіреаіа.ого/\ікі/Могбіѕ): 


уаг а = доситей® . сгеаёеЕТетепЕ ("а 


ито’); 


гефиги !!(а.сапРТауТуре 8& а.сапРТауТуре( ' аи 10/094; 


содесѕ="үогріѕ"') .герТа 


се(/по/, '')); 


О <аиа10> в формате МАУ (Һр://еп.мікіреаіа.ого/\мікі/\МАМ): 


уаг а = аоситепї. сгеаёеЕТетепЕ ("а 


ито’); 


гефиги !!(а.сапРТауТуре 8& а.сапРТауТуре( ' аи То/мам; 


сойесѕ="1"') .гер1асе(/п 


0/25) 


О <аидіо> в формате ААС (Һ&р://ги.мікіреаїіа.ого/мікі/Айуапсеа_Аџаіо_Соаіпд): 


уаг а = аоситепї. сгеаёеЕТетепі ("а 


ито’); 


гефиги !!(а.сапРТауТуре 8& а.сапРТауТуре( ' аи 1о/тр4; 


содес$="тр4а.40.2"').герТасе(/по/, '')); 
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О <сапуаз> (см. главу 4): 
гефиги !!Чоситей® .сгеаеЕ1етепї ('сапуаѕ ') .деЕСопїехї; 
О <сапуаѕ>, АРІ рисования текста (см. раздел «Текст» главы 4): 
уаг с = аоситепі . сгеаіеЕТетепі ('сапуаѕ') ; 
геёигп с.деЕСопїехі && Турео? с.одеЕСопехї('24').111ТехЕ == ' Ғипсїлоп'; 
О <соттапа> (Һіёр://ЫієІу/адіғп): 
геёигп ‘буре’ іп доситепїі. сгеатеЕТетепЕ(`соттапа”); 
О <9афа11$4> (Һр://ЬЛу/Ә№\25р): 
гебиги ‘оріїіопѕ’ іп доситепі.сгеаёеЕТетепі (*4афа11$$”); 
О <аеѓа115> (Һр://ЫІу/сО8тОу): 
геёигп ‘ореп’ іп доситепїі. сгеатеЕТетепЕ(`деёа115'); 
О <аеуісе> (НЕр://БЖАу/ааВеЦу): 


геёигп ‘уре’ іп дӢоситепі.сгеаёеЕТетепі(еуісе'); 


О <Ғогт>, валидация (Һр://ЫЄ.1у/сБ9М/т]ј): 


геїиги 'по\а1іаае' іп аоситепї. сгеаёеЕТетепі ( ' Ғогт' ) ; 

О <іғгате ѕапарох> (Һр://Ы̇од.мһаёмд.ого/\мһаѕ-пехї-іп-һті-еріѕое-2-ѕапабох): 
гефиги ‘запарох’ іп Чоситей® . сғеатеЕТетепї (‘іҒгате’); 

О <1Ргате $гсаос> (Һр://Ы̇од.мһаёмд.ога/мһаїѕ-пехі-іп-Һті-еріѕойе-2-ѕапабох): 
гефиги ‘згс49ос’ іп ӢоситепЕ. сгеаеЕТетепї ( `1Тгате’); 

О <1приё аиіоҒосиѕ> (см. «Автофокусировка полей» на с. 148): 

гефигп 'аисоҒосиѕ' іп аоситей® . сгеасеЕ1етепі ( ' іприї'); 


О <іприё р1асеһо1дег> (см. «Подсказывающий текст» на с. 147): 


геёигп 'рТасеһо1дег' іп доситепі. сгеаёеЕТетепЕ( ' іприё' ); 
О <іприё Ұуре="соТог"> (Һр://ЬіЛу/9НкеМп): 
уаг 1 = аоситепЕ .сгеаёеЕТетепЕ( ‘іприё’ ); 


1.ѕесАссг1риёе( ‘буре’, ‘со1ог’); 
геїигп і.Ёуре !== ‘ех’; 
О <1приё фуре="ета11"> (см. раздел «Адреса электронной почты» главы 9): 
уаг 1 = аоситепЕ .сгеаёеЕТетепЕ( 'іприё' ); 
1. ѕесАссгіриёе('ёуре', 'ета11'); 
геїигп 1.6уре !== '‘ехї'; 


О <іприё фуре="питрег"> (см. раздел «Числа как счетчики» главы 9): 


уаг і = адоситей® .сгеаёеЕТетепЕ( ' іприё' ); 
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1.5е{А 


+ 


сгірите('уре', 'питрег’); 
гесигп 1.Ёуре !== 'Еехі'; 


О <1приф фуре="гапде"> (см. раздел «Числа как ползунки» главы 9): 


уаг і = доситей® .сгеаёеЕТетепЕ( ' іприё' ); 
1.5е{А 


+ 


Егіриёе( 'уре', 'гапде’); 
гесигп і.Ёуре !== 'Еехі'; 
О <іприё ёуре="ѕеагсһ"> (см. раздел «Формы поиска» главы 9): 
уаг і = доситей® .сгеаёеЕТетепЕ( ' іприё' ); 
1. ѕегАСіг1риёе( 'уре', 'зеагсй’); 
гесигп 1.Ёуре !== '‘Еехі'; 
О <1приф ёуре="+е1"> (Һр://ЬіЄ1у/62т005): 
уаг 1 = адоситепі .сгеаёеЕТетепЕ( ‘іприё' ); 
1. ѕегАг1риѓёе( ‘туре’, ‘+е1'); 
геіигп 1.Ёуре !== ‘ехі`'; 
О <іприЁ фуре="иг1"> (см. раздел «Веб-адреса» главы 9): 
уаг і = доситей® .сгеаёеЕТетепЕ ( ' іприё' ); 
1. ѕесАТг1риёе( 'уре', 'иг1'); 
гефиги 1.Ёуре !== 'Еехі'; 
О <іприЁ фуре="дафе"> (см. раздел «Выборщики даты» главы 9): 
уаг і = адоситепі .сгеаёеЕТетепЕ( ' іприё' ); 
1. ѕегАбгіриѓе( ‘туре’, 'даїе'); 
гесигп 1.Ёуре !== 'Еехі'; 
О <іприї фуре="{1те"> (см. раздел «Выборщики даты» главы 9): 
уаг і = адоситепі .сгеаёеЕТетепЕ( ' іприё' ); 
1. ѕегАгіриѓе( ‘туре’, 'Еіте'); 
гефиги 1.Ёуре !== 'Еехі'; 
О <іприЁ ёуре="даеёіте"> (см. раздел «Выборщики даты» главы 9): 
уаг 1 = адоситепі .сгеаёеЕТетепЕ( ' іприё' ); 
1. ѕегАгіриѓе( 'уре', 'дате те’); 
гефиги 1.буре !== 'Еехі'; 
О <1приё фуре="дафе1те-1оса1 "> (см. раздел «Выборщики даты» главы 9): 


уаг і = доситей® .сгеаёеЕТетепЕ( ' іприё' ); 


+ 


1. ѕегАсіг1риёе( 'ёуре', 'дабете-1оса1); 
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гефиги і.Ёуре !== '‘ехі'; 
О <іприї фуре="топй"> (см. раздел «Выборщики даты» главы 9): 
уаг і = аоситей® .сгеаёеЕТетепЕ( 'іприё' ); 
1. ѕесАссг1риёе('ёуре', 'топЕћ'); 
гефиги і.Ёуре !== '‘ехі'; 
О <іприї їуре="меек"> (см. раздел «Выборщики даты» главы 9): 


уаг 1 = аоситепЕ .сгеаёеЕТетепЕ( 'іприё' ); 


1. ѕесАтЕгіриёе( 'уре', '"меек'); 
гефиги 1.6уре !== '‘ехї'; 
О <тефег> (Һр://Ыіє.Іу/сорхо?): 
геїигп ‘уа1ие’ іп доситепЕ.сгеатеЕ 
О <оиЁриї> (Һєр://6іє.Іу/аѕЈаднН): 
геїиги ‘уаТие’ іп оситепЕ.сгеатеЕ 
О <ргодгеѕѕ> (Һр://ЬЄ1у/ЫЈрМуб): 
геїигп ‘уа1ие’ іп оситепЕ.сгеатеЕ 
О < 1те> (Һр://БіЄЛу/ЬІ62јр): 


геёигп ‘уа1иеА$Бафе’ іп дӢоситепі. сгеаёеЕТетепі( ‘{1те’); 


епі( ‘тебер’ ); 


Ф 


Ф 


епі(‘оириї'); 


Ф 


епЕ(‘ргодгеѕѕ'); 


О <\1960> (см. главу 5): 

геёигп ! !аоситепї . сгеатеЕетепї ( 'у14ео').сапРТауТуре; 
О <\1960>, заголовки (ВЁр://Ы&.у/9ЭтИВг): 

геїиги 'гаск' іп доситепЕ . сгеатеЕ1етепї ( 'Егаск') ; 
О <\194е0 розфег> (Һр://ЬЄІу/Ы6АҺ2Т): 


гебиги ‘розфег’ іп дӢоситепі. сгеаёеЕТетепі (‘уїдео’); 


О <\19е0> в формате \УеБМ (БЕр://ммим ммеБтргодесЕ.огд): 
уаг у = аоситей® . сгеатеЕТетепі ( 'у14ео’'); 
гефиги !!(у.сапРТауТуре 8& у.сапРТауТуре( ' у14ео/мебт; содес$="ур8, 
үогріѕ"').герТасе(/по/, '')); 
О <үійео> в формате Н.264 (см. раздел «Видеокодеки» главы 5): 
уаг у = аоситей® .сгеафеЕ1етеи® ( 'у14ео’); 
гефиги !!(у.сапРТауТуре && у.сапРТауТуре( 'у1їйео/тр4; сойесѕ="аус1.42Е01Е, 
тр4а.40.2"').герТасе(/по/, '')); 
О <\19е0> в формате ТВеога (см. раздел «Видеокодеки» главы 5): 


уаг у = аоситепі .сгеаеЕТетепї ( 'уійео') ; 
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гефиги !!(у.сапРТауТуре && у.сапРТауТуре( 'у14ео/099; сойесѕ="Еһеога, 
уогр1$"').герТасе(/по/, '')); 
О сопёепіЕаіфарТе (ИЕр://Ыу/а!мЬ5): 
гесигп ‘1ѕСопепЕаіёарје’ іп аоситепЕ. сгеасеЕ1етепі (‘зрап’); 
О Пгав-ап4-4гор (Һр://ЫІу/амовРо): 
гесигп ‘ЯғгаддарТе’ 1п доситепі. сгеасеЕТетепі( ‘ѕрап'); 
О 5УС (ПИр:/Лмммм м3 .ога/ТВ/$МС/): 
гебиги !! (Чоситей® . сгеафеЕ1ЛететЕ№ && Чоситей® . сгеафеЕ1етет {№ 
(ПЕЕр: //ммм .м3.0г9/2000/$\49’, ‘үд’ ).сгеаёеЅ/СКес?); 


О 5УС віехі/ћёт (Һр://Һаскѕ.то2а.ог9/2010/05/бгеғох-4-һе-һті5-рагѕег-іпііпе-ѕу9- 
ѕрееа-апа-тоге/): 


уаг е = аоситепї . сгеаёеЕТетепі( ‘дїу’) ; 

е.іппегнНтТМі = ‘<5ү9></5үд>'; 

гесигп !! (міпаом. 5У65У6ЕТетепі && е. РїгѕСһіТа іпѕапсео? 

пом. 5У651У6ЕТетепё) ; 

О ЖерЅітріерв (һҺ&р://аеу.му3.о0г9/2006/мерарі/МерЅітріерв/): 
гесигп ! міпаом. іпаехеабв; 

О Жер ЅосКкеіѕ (Һр://аеу.м3.ого/һті5 /мебзоске5/): 
геїиги ! !міпаом.МерЅоскеї; 

Оо Меһ $ОТ, (һ№р://деу.м3.ого/һті5/\мерааїабаѕе/): 


гесигп ! міпаом.орепратараѕе; 


Ег 


№ 


О Геолокация (см. главу 6): 


гефиги ! І пауіда?ог.део1осаїітоп; 
О История (Һр://ЬЄ1у/9ЈСАСВ): 
гебиги !!(итидом. И1$$огу && мтидом. һіѕЕогу.риѕћ сате 88 


мтидом. їі ѕогу.рорЅЕаїе) ; 
О Локальное хранилище (Һ&р://аеу.м3.огд/Һті5/\мебѕїогаде/): 

гесигп ('Тоса15№огаде' 1п міпдом) 8& міпдом[ 'Тоса15іогаде'] !== пи11; 
О Микроданные (Һр://ЬіІу/аВСпар): 

гебиги 1! аоситепЕ .деї ет ; 


О Обмен сообщениями между документами (сгоѕѕ-аосшпепё теѕѕавіпе) (Һр://Ьі. 
у/суоаха): 


гефиги !1!мтпаом. ро$Меззаде; 
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о 


О 


Офлайновые веб-приложения (см. главу 8): 
гефиги ! міпаом.арр1 ісаттопСасће; 
Сессионное хранилище (Ћр://аеулм3.ого/Һті5/мерѕогаде/): 
їгу { 
гебиги ('ѕеѕѕіоп5оғаде' іп міпаом) && міпаом[ 'ѕеѕѕіопЅїогаде' ] !== пи11; 
} саїсһ(е) { 
геїигп Ға1ѕе; 
} 


События, посылаемые сервером (зетует-зепё еуепіѕ) (ВИр://ае\.м3З.ога/Нт5/ 
емепїѕоигсе/): 


геёигп урео? ЕүепёЅоигсе !== 'ипде?іпеа' ; 
Файловый АРІ (Һіёр://аеу.м3.0гд/2006/мерарі/ЕііеАРІ/): 
гефигп Туреот ЕіТеКеааег != 'ипде1пеа'; 


Фоновые вычисления (\7еЬ \У!огКегз) (Һр://6і.Іу/9јһеор): 
гебиги !!м1пдом.мМогКег; 

Опао (Һ&р://ЬіЄ.1у/656ЈЕВ): 

геёигп Туреот ЏпаоМападег !== ‘ипде?іпеа' ; 


Для дальнейшего изучения 


Спецификации и стандарты: 


о 
Ө! 
Ө! 
Ө! 
Ө! 
о 
Ө! 
Ө! 


НТМІ5 (Һёр://ЬіЄ.1у/БҮіЇООр); 

геолокация (Һ&р://мму.м3.огд/ТВ/деоіосайоп-АРІ/); 
Ѕегуег-Ѕепі Еуепіѕ (Һ&р://аеу.м3.огд/ћті5/емепёѕоигсе/); 
УУеБЅітрІіерв (һіёр://деулм3.огд/2006/мерарі/Л\\Мербітріерв/); 
Уер Ѕоскесѕ (Һр://аеу.м3.ого/һёті5/мерѕоскеіѕ/); 

Уер 501. Рабађаѕе (Һр://аеу.м3.ого/һті5/мерааѓараѕе/); 
локальное хранилище (ћ&р://аеу.м3.ого/ћті5/\мерѕіогаде/); 
фоновые вычисления (ВИр://ЬКу/Эпеог). 


Јаха$сгірё-библиотека Мойегпіхг (Вр: //млмм.тодегтяг.сот) — библиотека для 


тестирования НТМТ.5-функций. 


